Flutter-Listview 的子级在滚动期间位于上面小部件的后面

Question

参考这个视频

这是我的代码，它简单地使用了 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))
              ],
            ),

谢谢

Answer 1

这种行为是正常的，因为唯一可滚动的 Widget 是您的ListView.builder. 要使其他所有内容也可滚动，您可以使用SingleChildScrollView。将其包裹在您的 周围Column，这使得整个内容Column可以滚动。值得一提的是，您必须将shrinkWrap属性设置为ListView.builder()to true，否则您将收到错误。

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