Flutter 带颤振的建筑网格布局

我对Flatter非常陌生，对如何使用小部件来创建本地Androids、RelativeLayout和ConstraintLayout的可持续替代品感到困惑，但无法正确使用列、行小部件。我正在尝试建立这个布局，但直到现在才能够

我首先为整个内容添加了一个容器，然后为每个“块”添加了一列，然后对其余部分使用行/容器。以下是我迄今为止编写的代码，但没有显示任何内容：

Container(
            height: 250,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 24),
              child: Column(
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      gradient: LinearGradient(
                        colors: colorItems // a color list at global scope with 2 items
                      ),
                      color: Colors.black
                    ),
                  )
                ],
              ),
            ),
          )

---

我添加了一个完整的示例，说明您正在尝试获取的内容：

下面是小部件树的外观：

WIDGET HEIRARCHY
Container
  - Column
    - Container
    - SizedBox
    - Expanded
      -Row
        - Container
        - SizedBox
        -Expanded
          - Column
            - Container
            - SizedBox
            - Expanded
              - Row
                - Expanded
                  - Container
                - Expanded
                  - Container
                - Expanded
                  - Container

代码

输出

---

非常感谢您！我马上就去试试。另外，如果您不介意的话，您可以添加您使用的小部件的层次结构吗？就像我在问题中编辑的那样，我添加了小部件层次结构，您可以查看它@垫木

WIDGET HEIRARCHY
Container
  - Column
    - Container
    - SizedBox
    - Expanded
      -Row
        - Container
        - SizedBox
        -Expanded
          - Column
            - Container
            - SizedBox
            - Expanded
              - Row
                - Expanded
                  - Container
                - Expanded
                  - Container
                - Expanded
                  - Container

class StackOver extends StatelessWidget {
  final BoxDecoration _boxDecoration = BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(
      15.0,
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Tab bar',
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        // parent container housing all other widgets
        child: Container(
          height: 250,
          child: Column(
            children: [
              // frist container [give it a height, it takes up the width of the parent]
              Container(
                height: 80,
                decoration: _boxDecoration,
              ),

              // add spacing
              SizedBox(
                height: 15,
              ),

              // second child of the column [consists of a Row with children]
              Expanded(
                child: Row( // row 
                  children: [
                    Container( // first child 
                      width: 80, // give it a width, it takes up the height of parent since it is wrapped with an expanded widget
                      decoration: _boxDecoration,
                    ),

                    // add spacing
                    SizedBox( // second child
                      width: 15,
                    ),


                    Expanded( // thrid child [consists a column with children ]
                      child: Column(
                        children: [
                          Container( 
                            height: 80, // give it a height, it takes up the width of parent since it is wrapped with an expanded widget
                            decoration: _boxDecoration,
                          ),

                          // add spacing
                          SizedBox( // second child
                            height: 20,
                          ),


                          Expanded( // third child [consists of a row with 3 containsers]
                            child: Row( 
                              children: [
                                Expanded( // first container
                                  child: Container(
                                    decoration: _boxDecoration,
                                  ),
                                ),

                                // add spacing
                                SizedBox(
                                  width: 15,
                                ),
                                Expanded( // second container
                                  child: Container(
                                    decoration: _boxDecoration,
                                  ),
                                ),

                                // add spacing
                                SizedBox(
                                  width: 15,
                                ),
                                Expanded( // third container
                                  child: Container(
                                    decoration: _boxDecoration,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}