我正在尝试使用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,
),
),
),
)
]
),
答案 0 :(得分:0)
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(),
),
)
],
),
),
答案 1 :(得分:0)
我可以通过以下方法解决问题。
代替使用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,
),
),
),
),
),
)
]
),
),