Flutter 展开 Container 以填充 Row 的剩余 space

Question

我在一行中有一张图片，该图片旁边有一段文字。我想让行完全展开，图像作为它的大小，然后保持完整区域应该由容器占用。

这是我的代码片段：

Row(
        children: <Widget>[
          Container(
            margin: EdgeInsets.fromLTRB(10, 50, 10, 8),
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Color.fromARGB(100, 0, 0, 0),
                  blurRadius: 5,
                ),
              ],
            ),
            child: Row(
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Column(children: <Widget>[
                  Image.asset(
                    'assets/card.png',
                    height: 62,
                    width: 62,
                    fit: BoxFit.cover,
                  )
                ]),
                Container(
                  child: Text("Hello world"),
                )
              ],
            ),
          ),
        ],
      ),

我想要这样：

Answer 1

我建议您只使用 Row 和 Column 开始构建布局，以免混淆。我经常构建如下布局。

布局对象（例如文本、图像）仅适用于 Row 和 Column。并在 Row 和 Column.

mainAxisAlignment

crossAxisAlignment

使用Padding或Align、Expanded等设置样式。您也可以使用Container.
另外装饰。

参考：

基本布局：

https://flutter.dev/docs/development/ui/layout

构建布局时的提示：

https://medium.com/@liewjuntung/tips-on-using-android-studio-to-develop-flutter-apps-9e42c047b7f4

希望对你有所帮助。

示例代码：


    Widget buildCard() {
      return Container(
        margin: EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Color.fromARGB(100, 0, 0, 0),
              blurRadius: 5,
            ),
          ],
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Image.asset(
              'assets/card.png',
              height: 62,
              width: 62,
              fit: BoxFit.cover,
            ),
            Padding(
              padding: const EdgeInsets.only(top: 12.0, left: 12.0),
              child: Text(
                "Hello world",
                style: TextStyle(
                  fontWeight: FontWeight.w500,
                  letterSpacing: 0.8,
                ),
              ),
            )
          ],
        ),
      );
    }

Answer 2

在文本周围使用 Expanded 而不是 Container。

Flutter 展开 Container 以填充 Row 的剩余 space

Flutter expand Container to fill remaining space of Row

flutter

flutter-layout