时间戳

首页 > 解决方案 > 扑动 DraggableScrollableSheet 与粘性标题

android - 扑动 DraggableScrollableSheet 与粘性标题

问题描述

我正在我的颤振应用程序中实现 DraggableScrollableSheet 并希望有一个粘性标题，即只有列表视图滚动并且工作表的顶部始终保持原位。我的小部件如下所示：

SizedBox.expand(
    child: DraggableScrollableSheet(
      maxChildSize: 0.9,
      minChildSize: 0.2,
      initialChildSize: 0.3,
      expand: false,
      builder:
          (BuildContext context, ScrollController scrollController) {
        return Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              )),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              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(
                  'Neuigkeiten',
                  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('Erfahre mehr ... '),
                  ],
                ),
              ),
              SizedBox(height: 16),
              Expanded(child: NewsList(controller: scrollController))
            ],
          ),
        );
      },
    ),
  );

基本功能有效，但是只有在列表视图项上拖动/滚动时，工作表才可拖动和滚动。我需要进行哪些更改才能使列中的其他小部件也可滚动。我在没有解决方案的情况下尝试了 Scrollable 和 Draggable 小部件。

任何帮助表示赞赏。

标签： androidiosflutterdart

解决方案

问题是 ListView 本身。为此，您需要使用 SliverList，检查此答案

 Widget _buildDiscoverDrawer() {
    return DraggableScrollableSheet(
        maxChildSize: 0.95,
        minChildSize: 0.25,
        initialChildSize: 0.4,
        builder: (context, scrollController) {
          List<Widget> _sliverList(int size, int sliverChildCount) {
            List<Widget> widgetList = [];
            for (int index = 0; index < size; index++)
              widgetList
                ..add(SliverAppBar(
                  title: Text("Title $index"),
                  pinned: true,
                ))
                ..add(SliverFixedExtentList(
                  itemExtent: 50.0,
                  delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                    return Container(
                      alignment: Alignment.center,
                      color: Colors.lightBlue[100 * (index % 9)],
                      child: Text('list item $index'),
                    );
                  }, childCount: sliverChildCount),
                ));

            return widgetList;
          }

          return CustomScrollView(
            controller: scrollController,
            slivers: _sliverList(50, 10),
          );
        });
  }

推荐阅读