DraggableScrollableSheet中的Listview不会在颤动中滚动答案

【问题标题】：Listview inside DraggableScrollableSheet not scrolling in flutterDraggableScrollableSheet中的Listview不会在颤动中滚动
【发布时间】：2020-07-07 02:25:55
【问题描述】：

我设计了非常重的嵌套设计，如下所示，当我的列表扩展列表视图时的问题似乎没有滚动这是什么原因，底部表被扩展但没有关注它里面的列表视图，如果我通过触摸“营业时间”文本进行滚动，它开始滚动，但是当它向上滚动时，我无法向下滑动。

_showDialog(BuildContext context) {
    print("_showDialog");
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (BuildContext context) {
        return DraggableScrollableSheet(
          expand: false,
          builder: (context, scrollController) {
            return Container(
              child: Stack(
                children: <Widget>[
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Align(
                          alignment: Alignment.topCenter,
                          child: Container(
                              margin: EdgeInsets.symmetric(vertical: 8),
                              height: 8.0,
                              width: 70.0,
                              decoration: BoxDecoration(
                                  color: Colors.grey[400],
                                  borderRadius: BorderRadius.circular(10.0)))),
                      SizedBox(height: 16),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 24),
                        child: Text('Operational Hours',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: widget.isTab(context)
                                    ? TabTextStyles.mediumText
                                        .copyWith()
                                        .fontSize
                                    : PhoneTextStyles.mediumText
                                        .copyWith()
                                        .fontSize)),
                      ),
                    ],
                  ),
                  ListView(
                    controller: scrollController,
                    children: <Widget>[
                      SizedBox(height: 54.0),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 24),
                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              SizedBox(height: 20.0),
                              Text('Select days to add hours',
                                  style: widget.isTab(context)
                                      ? TabTextStyles.mediumText.copyWith()
                                      : PhoneTextStyles.mediumText.copyWith()),
                            ]),
                      ),
                      DaysList()
                    ],
                  ),
                ],
              ),
              decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                color: Theme.of(context).backgroundColor,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(24.0),
                  topRight: Radius.circular(24.0),
                ),
              ),
            );
          },
        );
      },
    );
  }

【问题讨论】：

我认为 DaysList 小部件有问题。在 Dayslist 中，您使用的是哪个小部件？

标签： flutter flutter-layout

【解决方案1】：

你犯了几个错误。首先，将始终在顶部可见的小部件放在Column 中，然后将DaysList 包装在Expanded 中并将ScrollController 传递给它。

这是你的方法：

void _showDialog(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return DraggableScrollableSheet(
        expand: false,
        builder: (context, scrollController) {
          return Column(
            children: <Widget>[
              // Put all heading in column.
              column,
              // Wrap your DaysList in Expanded and provide scrollController to it
              Expanded(child: DaysList(controller: scrollController)),
            ],
          );
        },
      );
    },
  );
}

这是你的Column：

Widget get column {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Align(
        alignment: Alignment.topCenter,
        child: Container(
          margin: EdgeInsets.symmetric(vertical: 8),
          height: 8.0,
          width: 70.0,
          decoration: BoxDecoration(color: Colors.grey[400], borderRadius: BorderRadius.circular(10.0)),
        ),
      ),
      SizedBox(height: 16),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: Text('Operational Hours', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),),
      ),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 20.0),
            Text('Select days to add hours'),
          ],
        ),
      ),
      SizedBox(height: 16),
    ],
  );
}

这就是你的DaysList 的样子：

class DaysList extends StatelessWidget {
  final ScrollController controller;

  const DaysList({Key key, this.controller}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: controller, // assign controller here
      itemCount: 20,
      itemBuilder: (_, index) => ListTile(title: Text("Item $index")),
    );
  }
}

输出：

【讨论】：

我还想在底页末尾添加按钮，无论滚动如何，该按钮都将固定在底部。我该怎么做？
@hiashutoshsingh 你想把它作为 List 中的最后一个元素吗？我可以请求你想要实现的截图吗？
@CopsOnRoad 如果我们想将可拖动行为添加到标题文本中，例如“营业时间”和“选择天数以添加小时数”，该怎么办。但是到达顶部后，标题应该是固定的。
@SasankSunkavalli 是的，这是可能的，我会在今天晚些时候有空的时候更新它。
@CopsOnRoad 也许你可以建议我如何实现它？无代码

【解决方案2】：

截图：

调用这个方法：

void showMyBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (_) {
      return DraggableScrollableSheet(
        maxChildSize: 0.8,
        expand: false,
        builder: (_, controller) {
          return Column(
            children: [
              Container(
                width: 100,
                height: 8,
                margin: EdgeInsets.symmetric(vertical: 10),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.grey,
                ),
              ),
              Expanded(
                child: ListView.builder(
                  controller: controller,
                  itemCount: 100,
                  itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
                ),
              ),
            ],
          );
        },
      );
    },
  );
}

【讨论】：