Flutter 为什么不尊重容器宽度？答案

【问题标题】：Flutter Why is container width not honoured?Flutter 为什么不尊重容器宽度？
【发布时间】：2019-01-16 21:14:28
【问题描述】：

我正在尝试创建一个圆形图像。不幸的是，容器的宽度没有得到尊重，我不知道为什么。我错过了什么？

Drawer _getDrawer(List<Job> data) {
  return Drawer(
    // Add a ListView to the drawer. This ensures the user can scroll
    // through the options in the Drawer if there isn't enough vertical
    // space to fit everything.
    child: ListView(
      // Important: Remove any padding from the ListView.
      padding: EdgeInsets.zero,
      children: <Widget>[
        _getDrawerHeader(),
        ListTile(
          title: Text('Item 1'),
          onTap: () {
            // Update the state of the app
            // ...
          },
        ),
        ListTile(
          title: Text('Item 2'),
          onTap: () {
            // Update the state of the app
            // ...
          },
        ),
      ],
    ),
  );
}

DrawerHeader _getDrawerHeader() {
  return DrawerHeader(
    child: StreamBuilder(
        stream: FirebaseAuth.instance.currentUser().asStream(),
        builder: (context, AsyncSnapshot<FirebaseUser> snapshot) {
          if (snapshot.hasData) {
            return ListView(
              children: <Widget>[
                _getCircleImage(snapshot.data.photoUrl),
                Text('test'),
                Text('test'),
              ],
            );
          }
          return Center(child: CircularProgressIndicator());
        }),
    decoration: BoxDecoration(
      color: Colors.blue,
    ),
  );
}

_getCircleImage(String url) {
  return Container(
    width: 64.0,
    height: 64.0,
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new NetworkImage(url),
        fit: BoxFit.cover,
      ),
      shape: BoxShape.circle,
    ),
  );
}

【问题讨论】：

图像似乎导致失真。我不知道为什么。将整个容器放入 CircleAvatar 作为一个孩子奇怪地解决了这个问题。但是直接将图像作为 backgroundImage 应用到 Circle Avatar 也不起作用。

标签： flutter

【解决方案1】：

这有点棘手，但 Flutter 是这样工作的，你的 Container 不知道 Parent 的约束，然后它会尝试填充所有可用空间。

您可以添加一个Align 小部件来修复它

    _getCircleImage(String url) {
      return Align(
        alignment: Alignment.centerLeft,
        child: Container(
          width: 64.0,
          height: 64.0,
          decoration: new BoxDecoration(
            image: new DecorationImage(
              image: new NetworkImage(url),
              fit: BoxFit.cover,
            ),
            shape: BoxShape.circle,
          ),
        ),
      );
    }

【讨论】：

这与 tldr 不相符。 “tl;dr：容器尝试，为了：尊重对齐，根据孩子调整自己的大小，尊重宽度，高度和约束，扩大以适应父母，尽可能小。”这里声明它在匹配父容器之前尊重宽度。
我认为是这样的：如果小部件没有孩子，没有高度，没有宽度，没有约束，也没有对齐，但是父级提供了有界约束，那么容器扩展以适应提供的约束由父母。
你可以简单地使用容器的对齐参数:)

【解决方案2】：

小部件只能在其父级给定的约束范围内决定自己的大小。这意味着一个小部件通常不能有它想要的任何大小。
小部件不知道也不决定自己在屏幕上的位置，因为决定小部件位置的是小部件的父级。
父小部件占用整个可用空间来绘制小部件，这里 Container 是父小部件，它占用任何可用空间，因此要为容器提供高度/宽度，需要放置在任何小部件内分配 x,y 位置 小部件以使其绘制。

所以根据上面的描述，Container 应该有一个与屏幕上的Container 对齐的父级。

例如：使用

  Align(
     alignment: Alignment.center,
     child: Container(),
  );

或

 Center(
      child: Container(),
    );

【讨论】：

【解决方案3】：

问题：

如果传递的约束很紧，Container 的约束不会有任何影响。

例如：

SizedBox.fromSize(
  size: Size.fromRadius(100), // Tight constraints are passed to the Container below
  child: Container(
    width: 100, // No impact
    height: 100, // No impact
    color: Colors.blue,
  ),
)

解决方案：

您需要放松这些严格的约束。有多种方法可以做到这一点。我在这里列出一些：

使用UnconstrainedBox:

SizedBox.fromSize(
  size: Size.fromRadius(100),
  child: UnconstrainedBox( // <-- UnconstrainedBox
    child: Container(
      width: 100, // Works
      height: 100, // Works
      color: Colors.blue,
    ),
  ),
)

使用Center 或Align：

SizedBox.fromSize(
  size: Size.fromRadius(100),
  child: Center( //    <-- Center
    child: Container(
      width: 100, // Works
      height: 100, // Works
      color: Colors.blue,
    ),
  ),
)

使用Column 或更好的Wrap：

SizedBox.fromSize(
  size: Size.fromRadius(100),
  child: Wrap( //   <-- Wrap
    children: [
      Container(
        width: 100, // Works
        height: 100, // Works
        color: Colors.blue,
      ),
    ],
  ),
)

【讨论】：