尝试使用堆叠小部件构建布局

Posted 2023-02-23

【中文标题】尝试使用堆叠小部件构建布局

【英文标题】：Trying to build a layout with stacking widgets

【发布时间】：2022-01-18 11:33:25

【问题描述】：

此外，我正在使用 ExpansionTile 尝试使用可滚动列表重新创建它。对于它的孩子，是否可以使用 ListView 使其可滚动？这是我的容器代码。

这是我的尝试，但我不断收到溢出的 RenderBox 错误

Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(
                          color: active.withOpacity(.4), width: .5),
                      boxShadow: [
                        BoxShadow(
                            offset: Offset(0, 6),
                            color: lightGrey.withOpacity(.1),
                            blurRadius: 12)
                      ],
                      borderRadius: BorderRadius.circular(8),
                    ),
                    width: _width - _width / 1.3,
                    height: _height / 2,
                    margin: const EdgeInsets.all(10.0),
                    child: Material(
                      child: ExpansionTile(
                        title: Text('Details'),
                        children: [
                          ListView(
                            itemExtent: 70,
                            padding: const EdgeInsets.all(8),
                            children: [
                              Row(
                                children: [
                                  CustomText(text: "Status :\nComplete"),
                                ],
                              ),
                              Row(
                                children: [
                                  CustomText(text: "Status :\nComplete"),
                                ],
                              ),
                              Row(
                                children: [
                                  CustomText(text: "Status :\nComplete"),
                                ],
                              ),
                              Row(
                                children: [
                                  CustomText(text: "Status :\nComplete"),
                                ],
                              ),
                                                                              
                              )
                            ],
                          ),
                        ],
                      ),
                    ))

【参考方案1】：

--> 试试这个代码

 Container(
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(
                  color: Colors.blue.withOpacity(.4), width: .5),
              boxShadow: [
                BoxShadow(
                    offset: Offset(0, 6),
                    color: Colors.red.withOpacity(.1),
                    blurRadius: 12)
              ],
              borderRadius: BorderRadius.circular(8),
            ),
            margin: const EdgeInsets.all(10.0),
            child: Material(
              child: ExpansionTile(
                title: Text('Details'),
                children: [
                  ListView(
                    shrinkWrap: true,
    
                      padding: const EdgeInsets.all(8),
                      children: [
                  Row(
                  children: const [
                  Text( "Status :\nComplete"),
                ],
              ),
    
              Row(
                children: const [
                  Text( "Status :\nComplete"),
                ],
              ),
                        Row(
                          children: const [
                            Text( "Status :\nComplete"),
                          ],
                        ),
    
    
            ],
          ),
          ],
        ),
        )),

【讨论】：

当内部元素过多时，有没有办法防止溢出发生？