一尘不染

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

flutter

我连续有一个图像,并且在该图像旁边有一个文本。我希望该行完全展开,并且图像以其大小显示,然后保持完整区域应由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


阅读 2409

收藏
2020-08-13

共1个答案

一尘不染

我建议您仅开始构建布局,RowColumn不要感到困惑。我经常按如下方式构建布局。

  1. 仅使用Row和布局对象(例如,文本,图像)Column。并在和中设置mainAxisAlignmentcrossAxisAlignment属性。Row``Column
  2. 设置样式Padding或者AlignExpanded等你也可以使用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,
                ),
              ),
            )
          ],
        ),
      );
    }
2020-08-13