Flutter 如何使用 Row 和 Column 制作 L 形布局

发布于12月05日

我想在卡片小工具中进行以下布局(卡片在大小框内以控制高度):

布局说明为:

蓝色:高度:与卡片的高度相同，宽度:固定
绿色:高度:固定，宽度:卡片剩余宽度
紫色:高度:卡片剩余高度，宽度:固定
PINK:高度:卡片的剩余高度，宽度:卡片的剩余宽度

先谢谢你.

推荐答案

您要查找的代码如下

SizedBox(
              height: 100,
              child: Row(
                children: [
                  Container(width: 100,color: Colors.blue),
                  Expanded(
                    child: Column(
                      children: [
                        Container(height: 30,color: Colors.green,),
                        Expanded(
                          child: Row(
                            children: [
                              Container(width: 100,color: Colors.purple),
                              Expanded(child:
                              Container(color: Colors.pinkAccent),)
                            ],
                          ),
                        ),
                      ],
                    ),
                  )

                ],
              ),
            ),

输出