Question

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

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

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

当我在SliverFillRemain中添加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,
                        ),
                    ),
                ),
            )
        ]
    ),

Answer 1

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

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 2

我可以通过以下方法解决问题。

代替使用SliverFillRemaining小部件，我可以使用SliverToBoxAdapter来实现所需的功能。然后，我在其中放了文本小部件。

请参见下面的示例。

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

CustomScrollView在SliverFill中带有内容的条子保持不滚动

2 个答案: