Flutter 展开 Container 填充 Row 的剩余空间

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 开始构建布局，以免混淆。我经常按如下方式构建布局。

1. 仅具有Row 和Column 的布局对象(例如文本、图像)。并在 Row 和 Column 中设置 mainAxisAlignment 和 crossAxisAlignment 属性。
2. 使用Padding或Align、Expanded等设置样式，也可以使用Container。
3. 另外装饰。

引用:

基本布局:

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,
                ),
              ),
            )
          ],
        ),
      );
    }