颤振成排

Question

我需要创建以下内容：

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

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？

Answer 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

Answer 2

解决方案

ufw allow 3000

说明

关于放置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子....

也许从一个简单的例子开始可以使理解变得更容易。请参阅this useful answer。

输出

P.S。欢迎来到StackOverFlow，Dmitry！