Flutter 扩展 Container 以填充 Row 的剩余空间 [英] Flutter expand Container to fill remaining space of 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"),
                )
              ],
            ),
          ),
        ],
      ),

我想要这样:

推荐答案

我建议你开始构建布局时只使用 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

希望对你有帮助.

示例代码:

    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 的剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！