使某些小部件可滚动

Question

我的页面中有一个列小部件。 Column widget 中有两个 widget，一个是 ListTie，另一个是 ListView。

Widget _showBody(BuildContext context) {
    return Column(children: [
      ListTile(
        horizontalTitleGap: 0,
        tileColor: Colors.white,
        onTap: () {},
        leading: const Icon(
          Icons.smart_button,
        ),
        trailing: const Icon(Icons.arrow_right),
        title: const Text('Click Inside'),
      ),
      BlocConsumer<SmartMeterListScreenCubit, SmartMeterListScreenState>(
          builder: ((context, state) {
            if (state is SmartMeterListScreenDone) {
              return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                        width: MediaQuery.of(context).size.width,
                        color: Colors.grey.shade200,
                        child: Padding(
                            padding: const EdgeInsets.all(10),
                            child: Text(
                              "Total items : ${state.smartMeter?.length}",
                              style:
                                  TextStyle(color: Colors.deepPurple.shade900),
                            ))),
                    RefreshIndicator(
                        onRefresh: () async {
                          // function
                        },
                        child: ListView.separated(
                            physics: const AlwaysScrollableScrollPhysics(),
                            separatorBuilder: (context, index) => Padding(
                                padding:
                                    const EdgeInsets.symmetric(horizontal: 20),
                                child: Container(
                                  color: Colors.grey.shade200,
                                  height: 1,
                                )),
                            padding: EdgeInsets.zero,
                            shrinkWrap: true,
                            itemCount: 100,
                            itemBuilder: (conntext, index) {
                              return InkWell(
                                  onTap: () {},
                                  child: ListItemPadding(
                                      child: Text(index.toString())));
                            }))
                  ]);
            }
            return Container();
          }),
          listener: ((context, state) {}))
    ]);
  }

我想让

ListTile

不可滚动，只有

ListView

可以滚动。

错误在这里

════════渲染库捕获异常 ═════════════════════════════════抛出以下断言 布局期间：RenderFlex 底部溢出了 4358 像素。

小部件创建跟踪当前已禁用。启用它可以使 改进了错误消息。可以通过传递来启用它

--track-widget-creation

至

flutter run

或

flutter test

。这 溢出的 RenderFlex 的方向为 Axis.vertical。边缘 溢出的 RenderFlex 已在渲染中标记 带有黄色和黑色条纹图案。这通常是由 内容对于 RenderFlex 来说太大了。

我知道我可以简单地通过用

SingleChildScrollView

包裹父列来修复它，但这将使整个屏幕滚动，这不是我想要的。

Answer 1

尝试将您的

ListView.separated

小部件包装在

Expanded

小部件中。

Answer 2

1. 将 ListView 包裹在展开的小部件中：这将使 ListView 占据列中所有可用的垂直空间。如果 ListView的项目数量较多，超出了屏幕的显示范围 高度，它将变得可滚动。

2. 使用 SingleChildScrollView：如果您希望整个内容可滚动（ListTile 和 ListView），您可以将 具有 SingleChildScrollView 的列。这使得整个内容 可滚动，包括 ListTile。