具有 SliverFillRemaining 内容的 CustomScrollView 条不滚动

Question

I am trying to create a flutter screen using the CustomScrollView and Sliver widgets where the SliverFillRemaining has a Text widget that can scroll down like reading scroll-able text content.

I can achieve this by wrapping the Text within the SingleChildScrollView however i want to have the functionality of a header that can automatically hide using SliverAppBar

How can i achieve the behaviour similar to SingleChildScrollView?

When i add Text widget inside SliverFillRemaining it only scrolls down until the SliverAppBar is hidden and then stops.

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,
                        ),
                    ),
                ),
            )
        ]
    ),

Answer 1

I was able to solve my issues with the following approach.

Instead of using the SliverFillRemaining widget i could use the SliverToBoxAdapter to achieve what i needed. i then had the Text widget inside that.

see example below.

     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,
                        ),
                      ),
                    ),
                  ),
                ),
              )
            ]
          ),
        ),

Answer 2

SliverFillRemaining widget to add the rest of the UI so we can see it scrolling. Add this as the second sliver, in the CustomScrollView under the SliverAppBar.

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(),
      ),
    )
        ],
      ),
    ),

Answer 3

对于那些找不到解决方案的人，您只需将hasScrollBody: true添加到 SliverFillRemaining