如何在列和行中都进行颤振布局？

Question

我刚刚开始学习颤振，我在制作如下图所示的布局时遇到了问题，请问如何制作布局enter image description here

这是我的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                height: 100.0,
                color: Colors.white,
                child: Text('Container 1'),
              ),
              SizedBox(
                height: 20.0,
              ),
              Container(
                height: 100.0,
                color: Colors.blue,
                child: Text('Container 2'),
              ),
              SizedBox(
                height: 20.0,
              ),
              Container(
                height: 100.0,
                color: Colors.red,
                child: Text('Container 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

根据我编写的代码，该代码与我期望的代码完全不同，请提供帮助，我对此并不陌生，希望我的技能不断提高。谢谢...

Answer 1

你在这里

    Scaffold(
        backgroundColor: Colors.teal,
        body: Container(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                color: Colors.red,
                height: 100.0,
                width: 100.0,
              ),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      color: Colors.yellow,
                      height: 100.0,
                      width: 100.0,
                    )
                  ],
                ),
              ),
              Container(
                color: Colors.blue,
                height: 100.0,
                width: 100.0,
              ),
            ],
          ),
        ),
      ),

Answer 2

我只是将您的Column小部件转换为Row，并在内部添加一个Expand中心小部件，然后在其中添加Column小部件。

        child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
                Container(
                    color: Colors.red,
                    height: 100.0,
                    width: 100.0,
                ),
                Expanded(
                    child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Container(
                        color: Colors.yellow,
                        height: 100.0,
                        width: 100.0,
                        ),
                        Container(
                        color: Colors.green,
                        height: 100.0,
                        width: 100.0,
                        )
                    ],
                    ),
                ),
                Container(
                    color: Colors.blue,
                    height: 100.0,
                    width: 100.0,
                ),
           ],
        ),