Flutter 中的布局：包含一个正方形和 3 行文本的行

Question

我想创建以下布局：

这是一个容器，包含一个行，children:

一个正方形容器，未知高度或宽度
a Column, children: 3 Text widgets (width is unknown)

方形 Container 的大小应该是 parent Container 的高度（它的宽度 = 它的高度） .带有 3 个 Text 小部件的 Column 应该扩展到 parent Container 的其余部分.

在Flutter中可以吗？如果可以，怎么做？

Answer 1

是可以的，先创建一个容器然后child应该是一行，然后行的children应该是另一个容器作为正方形，然后该列将有 3 个文本小部件作为其 children。此外，我会建议您将充当正方形的容器和扩展小部件中的列分别包装在扩展小部件中，将列包装为 3，将容器扩展小部件设置为 2。

Answer 2

是的，这是可能的。这里的技巧是使用 LayoutBuilder，其中 returns 是 parents 允许的大小。在这里，我使用 maxHeight 作为高度以及 红色方块容器 的宽度，而 Column 占用其余的宽度。

Container(
  width: 500, //parent size
  height: 100, //parent size
  child: LayoutBuilder(
    builder: (context, size) {
      return Row(
        children: [
          Container(
            color: Colors.red,
            height: size.maxHeight,
            width: size.maxHeight
          ),
          Expanded(
            child: Column(
              children: [
                Expanded(
                  child: Container(color: Colors.yellow),
                ),
                Expanded(
                  child: Container(color: Colors.blue),
                ),
                Expanded(
                  child: Container(color: Colors.green),
                ),
              ]
            ),
          ),
        ],
      ); 
    }),
  ),

Answer 3

尝试创建自定义小部件：

class BoxWidget extends StatelessWidget {

  BoxWidget(/*...*/);
  
  Widget build(_) {
    return Row(
      children: [
        AspectRatio(
          aspectRatio: 1,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.red,
            ),
          ),
        ),
        Column(
          children: [
            Text(widget.text1, style: style),
            Text(widget.text2, style: style),
            Text(widget.text3, style: style),
          ],
        ),
      ],
    );
  }
}

Answer 4

根据“The Anonymous Koder”的回答，这是这样做的方法：

return IntrinsicHeight(
  child: Row(
    children: [
      AspectRatio(
        aspectRatio: 1.0,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.red,
          ),
        ),
      ),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'line 1 bla bla bla bla bla bla bla bla bla bla bla bla',
              overflow: TextOverflow.ellipsis,
            ),
            Text(
              'line 2 bla bla bla bla bla bla bla bla',
              overflow: TextOverflow.ellipsis,
            ),
            Text(
              'line 3',
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    ],
  ),
);

Flutter 中的布局：包含一个正方形和 3 行文本的行

Layout in Flutter: row containing a square and 3 lines of text

layout

flutter