【问题标题】: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"),
                                ],
                              ),
                                                                              
                              )
                            ],
                          ),
                        ],
                      ),
                    ))

【问题讨论】:

    标签: flutter flutter-web


    【解决方案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"),
                              ],
                            ),
        
        
                ],
              ),
              ],
            ),
            )),
    

    【讨论】:

    • 当内部元素过多时,有没有办法防止溢出发生?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多