滚动期间的 Flutter- Listview 落后于小部件上方

标签 flutter user-interface flutter-layout

<分区>

Refer this video

这是我的代码,它简单地使用了 listView 构建器。滚动 ListView 意外地落后于行小部件上方。关于应该使用哪个小部件而不是 listView 构建器的任何建议?

 Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: [
                Row(
                  children: [
                    Text(
                      'Sorted By',
                      style: Theme.of(context).textTheme.caption?.copyWith(
                          color: AppColors.labelText, fontSize: 14),
                    ).paddingForOnly(right: 20),
                    sortButtons()
                  ],
                ),
                Text(
                  'List of Report',
                  style: Theme.of(context)
                      .textTheme
                      .bodyText1
                      ?.copyWith(color: AppColors.profileLabel),
                ).paddingForOnly(top: 30, bottom: 10),
                Flexible(
                    child: 
                    ListView.builder(
                        itemBuilder: (context, index) => ListTile(
                              onTap: () {
                                Application.customNavigation(
                                    context: context,
                                    path: ReportDetailScreen.route);
                              },
                              tileColor: AppColors.listTileBG,
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(15)),
                              leading: Image.asset(AssetsPath.calendarSymbol),
                              title: Text(
                                'Monday, Aug 05',
                                style: textTheme.bodyText2?.copyWith(
                                    color: Colors.black,
                                    fontWeight: FontWeight.w500),
                              ),
                            ).paddingWithSymmetry(vertical: 4))),
                //Expanded(child: reportList(context))
              ],
            ),

谢谢你

最佳答案

此行为是正常的,因为唯一可滚动的 Widget 是您的 ListView.builder。要使其他所有内容也可滚动,您可以使用 SingleChildScrollView .将它包裹在您的 Column 周围,这使得整个 Column 可以滚动。 重要的是你必须设置 shrinkWrap ListView.builder() 的属性设置为 true,否则会报错。

SingleChildScrollView(
  child: Column(
    children: [
      ...,
      ListView.builder(
        shrinkWrap: true,
        ...
      ),
    ],
  )
);

关于滚动期间的 Flutter- Listview 落后于小部件上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71556595/

相关文章:

flutter - 将图像切成相等的部分-还是仅调用图像的一部分? flutter - Dart

Flutter Web 应用程序无法在移动浏览器上运行。手机浏览器运行flutter代码报错怎么调试?

flutter - 如何从api打开链接的 WebView ?

flutter - 使软键盘与其他小部件重叠 - Flutter

Flutter ExpansionPanel 不会在 ListView 上展开

java - 在java中绘制盒子

java - 像 Java Swing 中的 GTK 一样垂直堆叠?

jquery - 我想在 Ajax 请求后显示 Jquery UI 对话框(消息)

dart - Flutter中使用ClipRRect()的一个问题

flutter - 为“字符串列表” flutter 中的每个元素定义导航路线