扩展列以适应屏幕宽度

Question

所以我想找出如何使Flutter中的卡片小部件变为全宽，基本上它只会根据其子元素扩展其宽度，我希望它能适应屏幕。任务相当简单，但我很难实现，在我的脚手架中基本上它包含两个卡片，并且有一些文本。卡片仅扩展到文本结束的大小，我希望卡片是全宽的，我该怎么做？

我希望卡片能够完全覆盖屏幕宽度，但是卡片只会包裹子文本小部件。

- Derpington

---

请在您的“Column”中添加“crossAxisAlignment: CrossAxisAlignment.stretch,”以使其内容能够自动拉伸，填满可用空间。 - anmol.majhail

正是我所需要的，非常感谢！ - Derpington

Answer 1

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

这样您就可以节省一些代码行。

示例代码：

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

- Son of Stackoverflow

Answer 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

这应该能解决问题。

- kunz

Answer 3

试试这个。

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

- Shahzad Akram

---

我看到我们也可以使用double.infinity来扩展容器...谢谢你的帮助。 - Derpington

Answer 4

你可以使用MediaQuery获取屏幕宽度。

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

- Figen Güngör

---

我能看出来这对于未来更复杂的应用程序可能会有用...谢谢你的帮助。 - Derpington