颤振为什么不遵守容器宽度? [英] Flutter Why is container width not honoured?

问题描述

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

I'm trying to create a circle image. Unfortunately, the width of the container is not honoured and I can't figure out why. What am I missing?

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

推荐答案

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

That's a little tricky but it's how Flutter works, your Container doesn't know the constraints of the Parent, then It try to fill all the space available.

您可以通过添加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

这篇关于颤振为什么不遵守容器宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！