具有 SliverFillRemaining 内容的 CustomScrollView 条不滚动

Posted 2023-02-23

【中文标题】具有 SliverFillRemaining 内容的 CustomScrollView 条不滚动

【英文标题】：CustomScrollView slivers with contents in SliverFillRemaining not scrolling

【发布时间】：2019-11-20 17:41:15

【问题描述】：

我正在尝试使用 CustomScrollView 和 Sliver 小部件创建一个颤动屏幕，其中 SliverFillRemaining 有一个 Text 小部件，可以像阅读可滚动的文本内容一样向下滚动。

我可以通过将文本包装在 SingleChildScrollView 中来实现这一点，但是我希望拥有可以使用 SliverAppBar 自动隐藏的标题功能

如何实现类似于 SingleChildScrollView 的行为？

当我在 SliverFillRemaining 中添加 Text 小部件时，它只会向下滚动，直到 SliverAppBar 被隐藏然后停止。

var scaffold = Scaffold(
    body: CustomScrollView(
        slivers: <Widget>[
            SliverAppBar(
                pinned: false,
                snap: false,
                floating: true,
                expandedHeight: 40.0,
                flexibleSpace: FlexibleSpaceBar(
                    title: Text(widget.path.title),
                ),
            ),
            SliverFillRemaining(
                hasScrollBody: true,
                child: Scrollbar(
                    child: Text(
                        data, //this variable has a huge string.
                        textAlign: TextAlign.left,
                        style: new TextStyle(
                            height: 1.5,
                            fontFamily: widget.fontFamily,
                            fontSize: widget.fontSize,
                            fontWeight: (widget.bold)? FontWeight.bold:FontWeight.normal,
                        ),
                    ),
                ),
            )
        ]
    ),

【参考方案1】：

我能够通过以下方法解决我的问题。

我可以使用 SliverToBoxAdapter 来实现我所需要的，而不是使用 SliverFillRemaining 小部件。然后我在里面有 Text 小部件。

参见下面的示例。

     var scaffold = Scaffold(
          body: Scrollbar(
            child: CustomScrollView(controller: _controller, slivers: <Widget>[
              SliverAppBar(
                actions: <Widget>[
                  IconButton(
                    icon: Icon(Icons.settings),
                    onPressed: () 
                      setState(() 
                        if (_expandedHeight == 40) 
                        _expandedHeight = 500;
                        _title = AppConstants.EMPTY_STRING;
                        
                        else 
                        _expandedHeight = 40;
                        _title = widget.path.title;
                        
                      );
                    ,
                  )
                  ],
                pinned: false,
                snap: false,
                floating: true,
                expandedHeight: _expandedHeight,
                flexibleSpace: FlexibleSpaceBar(
                  title: Text(_title),
                  background: OptionsPage(),
                ),
              ),
              SliverToBoxAdapter(
                child: Scrollbar(
                  child: Padding(
                    padding: const EdgeInsets.all(AppConstants.READER_PADDING),
                    child: MediaQuery(
                      data: MediaQuery.of(context).copyWith(
                        textScaleFactor: StoreProvider.of<AppState>(context).state.textScaleValue,
                      ),
                      child: Text(
                        data,
                        textAlign: TextAlign.left,
                        style: new TextStyle(
                          height: 1.5,
                          fontFamily: getLanguageMenuItemValueByName(StoreProvider.of<AppState>(context).state.languageName).fontName,
                          fontSize: getLanguageMenuItemValueByName(StoreProvider.of<AppState>(context).state.languageName).fontSize,
                          fontWeight:
                              (StoreProvider.of<AppState>(context).state.bold) ? FontWeight.bold : FontWeight.normal,
                        ),
                      ),
                    ),
                  ),
                ),
              )
            ]
          ),
        ),

【参考方案2】：

SliverFillRemaining 小部件添加 UI 的其余部分，以便我们可以看到它滚动。在 SliverAppBar 下的 CustomScrollView 中将其添加为第二个 sliver。

Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 200,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('FilledStacks'),
            ),
          ),

    SliverFillRemaining(
      child: Column(
        children: List<int>.generate(6, (index) => index)
            .map((index) => Container(
                  height: 40,
                  margin: EdgeInsets.symmetric(vertical: 10),
                  color: Colors.grey[300],
                  alignment: Alignment.center,
                  child: Text('$index item'),
                ))
            .toList(),
      ),
    )
        ],
      ),
    ),

【讨论】：

我实际上并没有尝试在 SliverFillRemaining 中创建列表，但我需要用可滚动文本填充剩余区域，因此不会在那里生成列表，因为它不能解决我的目的。跨度>

任何解决方案？？ - @Mon2

我能够在上述接受的答案中实现我所需要的