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

问题描述

我连续有一个图像，并且在该图像旁边有一个文本.我希望该行完全展开，并且图像采用其大小，然后容器应保留整个区域.

I have one image in a row and a text next to that image. I want the row to expand fully and image takes as its size, then remain full area should be taken by 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用户界面

推荐答案

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

I recommend you to start building layouts only with Row and Column not to get confusing. I often build layouts as follows.

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

1. Layout objects(eg. Text, Image) only with Row and Column. And Set mainAxisAlignment and crossAxisAlignment property in Row and Column.
2. Set styles with Padding or Align, Expanded etc. You can also use Container.
3. Decorate in addition.

参考:

基本布局:

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

构建布局时的提示:

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

希望您能对您有所帮助.

I hope you this will help you.

示例代码:

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

这篇关于Flutter展开Container以填充Row的剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！