Flutter 将行放入行中答案

【问题标题】：Flutter put row into rowFlutter 将行放入行中
【发布时间】：2019-07-03 03:47:17
【问题描述】：

我需要创建以下内容：

我可以用代码做到这一点：

Row(
  children: <Widget>[
    Container(
      width: 30
    ),
    Column(
      children: <Widget>[
        Text("label"),
        Container(
          width: screenSize.width - 30, // <- this is problem
          child: Row(
            children: <Widget>[
              Expanded( child: TextField() ),
              Expanded( child: TextField() ),
            ],
          ),
        ),
      ],
    ),
  ],
);

是否有可能以不同的方式进行，即width: screenSize.width - 30这一行？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您可以在 Column 小部件中使用 crossAxisAlignment 并使其拉伸以获取屏幕中的所有剩余宽度

Row(
children: <Widget>[
Container(
  width: 30
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch, // <- Add this
  children: <Widget>[
    Text("label"),
    Container(
      child: Row(
        children: <Widget>[
          Expanded( child: TextField() ),
          Expanded( child: TextField() ),
        ],
      ),
    ),
  ],
),],);

[请阅读 Column 小部件的 Flutter 官方文档]

Column Widget

CrossAxisAlignment

【讨论】：

【解决方案2】：

解决方案

Row(
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 50,
    ),
    Expanded(
      child: Column(
        children: <Widget>[
          Text("label"),
          Expanded(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: TextField()
                ),
                Expanded(
                  child: TextField()
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
);

说明

这是关于您放置Expanded 实例的位置。
你有一行，如果它包含一个Expanded 子元素，它可以填充它的父元素。所以我们定义了它的一个孩子（Container）的大小，另一个只是Expanded。 Column 孩子也是如此..

也许从一个更简单的例子开始更容易理解。请参考this useful answer。

输出

附：欢迎来到 StackOverFlow，德米特里！

【讨论】：