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

Question

我连续有一幅图像，该图像旁边有一个文本。我希望该行完全展开，并且图像以其大小显示，然后保持完整区域应由Container拍摄。

这是我的代码段：

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"),
                )
              ],
            ),
          ),
        ],
      ),

我想要这样： Flutter UI

Answer 1

我建议您仅使用Row和Column开始构建布局，以免引起混淆。我经常按如下方式构建布局。

1. 仅使用Row和Column布局对象（例如，文本，图像）。然后在mainAxisAlignment和crossAxisAlignment中设置Row和Column属性。
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,
                ),
              ),
            )
          ],
        ),
      );
    }