使用 Flutter 构建网格布局

Question

我是 Flutter 的新手，对如何使用小部件创建原生 Android、RelativeLayout 和 ConstraintLayout 的可持续替代品感到困惑，但无法正确使用 Column、Row 小部件。我正在尝试构建此布局，但直到现在才能够。

我首先为整个内容添加一个容器，然后为每个 'block' 添加一个列，然后为其余的使用 Rows/Containers。这是我到目前为止编写的代码，但没有显示任何内容：

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
                    ),
                  )
                ],
              ),
            ),
          )

编辑

请像这样解释您的小部件层次结构：

Container
  - Column
    - Row

Answer 1

我添加了您想要获得的完整示例：

下面是小部件树的外观：

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,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出