扩展列以适应屏幕宽度答案

【问题标题】：Expand column to fit screen width扩展列以适应屏幕宽度
【发布时间】：2019-07-09 11:27:54
【问题描述】：

所以我想弄清楚如何让 Card 小部件在颤动中变成全宽，基本上它只是根据它的孩子扩展它的宽度，我希望它适合屏幕，任务相当简单，但我真的很难实现这一点，在我的脚手架中基本上它包含两张卡片，里面有一些文字，卡片只会扩展到文本末尾的大小，我希望卡片是全宽的，我该如何实现？

我希望卡片是屏幕的全宽，但卡片只包裹子文本小部件

【问题讨论】：

在你的 -Column - 添加 - crossAxisAlignment: CrossAxisAlignment.stretch,
正是我想要的，非常感谢！！

标签： dart flutter

【解决方案1】：

将Column 包裹在Container 小部件中并将其宽度设置为double.infinity

这样可以节省几行代码。

示例代码：

Container(
  width : double.infinity,
  child: Column([...])
)

【讨论】：

【解决方案2】：

  body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            // flex:3,
              child: Container(
                padding: EdgeInsets.all(20.0),
                color: Colors.cyan,
                child: Text('1'),
              )//Container
          ),//Expanded         
        ],
      )//column

这应该可以解决问题

【讨论】：

【解决方案3】：

试试这个。

Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              width: double.infinity,
              child: new Card(child: Text("This Card is Expanded to full width"),),
            )
          ],
        )

【讨论】：

我知道我们也可以使用 double.infinity 扩展容器...谢谢您的帮助

【解决方案4】：

你可以通过MediaQuery获取屏幕宽度

final screenWidth = MediaQuery.of(context).size.width;

【讨论】：

我可以看到我可能会将这些用于未来更复杂的应用程序...谢谢您的帮助