是否可以在Flutter中将一列放在一行中？

Question

我尝试将一列连续放置。但这不起作用。

然后，我尝试使用不同的子属性将行和列放在相同的安全区域中。它不起作用。

该列应位于行的中间。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                height: 100.0,
                width: 100.0,
                color: Colors.yellow,
                child: Text('Container 1'),
              ),
              Container(
                height: 100.0,
                width: 100.0,
                color: Colors.green,
                child: Text('Container 1'),
              ),
              Container(
                width: double.infinity,
              ),
            ],
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                height: 100.0,
                color: Colors.red,
                child: Text('Container 1'),
              ),
              Container(
                height: 100.0,
                color: Colors.blue,
                child: Text('Container 1'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

错误消息是“ BoxConstraints强制无限宽度。”

Answer 1

尝试使用具有flex属性的扩展窗口小部件，您可以将该列放在一行中：

Container(
    width: 300,
    height: 100,
    child: Row(
      children: <Widget>[
        Expanded(flex: 1,
        child: Container(
          color: Colors.red,
          width: double.infinity,
          height: double.infinity,
        ),
        ),
        Expanded(flex: 2,
          child: Column(
            children: <Widget>[
              Expanded(flex:1,
                child: Container(
                  color: Colors.yellow,
                  width: double.infinity,
                  height: double.infinity,
                ),
              ),
              Expanded(flex:1,
                child: Container(
                  color: Colors.blue,
                  width: double.infinity,
                  height: double.infinity,
                ),
              ),
            ],
          ),
        ),
        Expanded(flex: 1,
          child: Container(
            color: Colors.green,
            width: double.infinity,
            height: double.infinity,
          ),
        ),
      ],
    ),
  ),