Question

我正在尝试创建圆形图像。不幸的是，容器的宽度不符合要求，我不知道为什么。我想念什么？

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,
    ),
  );
}

Answer 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,
          ),
        ),
      );
    }

更多信息：https://docs.flutter.io/flutter/widgets/Container-class.html

Answer 2

问题：

如果传递的约束很紧，

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,
      ),
    ],
  ),
)

Answer 3

小部件只能在其父级赋予的限制内决定其自身大小。这意味着小部件通常不能具有所需的任何大小。
由于小部件的父级决定了小部件的位置，因此小部件无法知道也不决定其在屏幕上的位置。
父级窗口小部件占用了可用于绘制窗口小部件的全部空间，这里的容器是父级窗口小部件，它占用了可用的任何空间，因此要给容器高/宽，需要将其放置在内部分配了小部件的 x，y位置以使其绘制的任何小部件。

因此，根据上述说明，Container的父级应该在屏幕上对齐Container。

例如：使用

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

OR

 Center(
      child: Container(),
    );

颤振为什么不遵守容器宽度？

3 个答案: