如何避免在Container中使用固定宽度?

时间:2018-11-22 06:37:32

标签: flutter

我原来有问题的代码:

请注意固定宽度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)),
                ],
              )
            ),
          ],
        )
      ),
    ),
  ]
)

1 个答案:

答案 0 :(得分:1)

如果您不为width指定Container,它将自动填充所有可用空间:

overflow example

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: ...

只需确保将所有内容包裹在MaterialAppWidgetsApp中,MediaQuery才能正常工作:

half size