flutter - 如何避免在 Container 中使用固定宽度？

Question

我原来有问题的代码：

注意固定宽度width: 220.0,。

ListView(
  children: <Widget>[
    Padding(padding: EdgeInsets.only(top:0.0),),
    InkWell(
      onTap: () {},
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(
              children: <Widget>[
                CircleAvatar(
                  radius: 28.0,
                  child: Text('1')
                ),
                Container(
                  height: 40.0,
                  width: 220.0, // Must to have, otherwise, it overflows the Text 'AAAAAAAA' container on the right.
                  padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Expanded(child: Text('This is very very very very very'
                        ' very very very long', 
                        style: TextStyle(fontSize: 13.0), overflow: TextOverflow.ellipsis),
                      ),
                      Expanded(child: Text('This is very very very very very'
                        ' very very very long', 
                        style: TextStyle(fontSize: 13.0), overflow: TextOverflow.ellipsis),
                      )
                    ],
                  ),
                ),
              ],
            ),
            Container(
              height: 40.0,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('AAAAAAAA', style: TextStyle(fontSize: 13.0)),
                ],
              )
            ),
          ],
        )
      ),
    ),
  ]
)

我的解决方案：

ListView(
  children: <Widget>[
    Padding(padding: EdgeInsets.only(top:0.0),),
    InkWell(
      onTap: () {},
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            CircleAvatar(
              radius: 28.0,
              child: Text('1')
            ),
            Expanded(
              child: Container(
                height: 40.0,
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('This is very very very very very'
                    ' very very very long', 
                    style: TextStyle(fontSize: 13.0), overflow: TextOverflow.ellipsis),
                    Text('This is very very very very very'
                    ' very very very long', 
                    style: TextStyle(fontSize: 13.0), overflow: TextOverflow.ellipsis)
                  ],
                ),
              ),
            ),
            Container(
              height: 40.0,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('AAAAAAAA', style: TextStyle(fontSize: 13.0)),
                ],
              )
            ),
          ],
        )
      ),
    ),
  ]
)

标签： flutter

Answer 1

如果您不提供widthforContainer那么它将自动填充任何可用空间：

Container(
    height: 40.0,
    child: Column(
        children: <Widget>[
        Expanded(
            child: Text(
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                      overflow: TextOverflow.ellipsis,
         )),
         Expanded(
             child: Text(
                      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                      overflow: TextOverflow.ellipsis,
          )),
        ],
    ))

如果你想给出一个宽度，那么建议使用类似MediaQuery的东西来确保值在屏幕尺寸上是统一的，例如：

Container(
  height: 40.0,
  width: MediaQuery.of(context).size.width / 2,
  child: ...

只需确保所有内容都包含在 aMaterialApp或WidgetsAppforMediaQuery中即可工作：