我有在CustomScroll视图中滚动的SliverAppBar,我意识到一旦添加文本并开始滚动SliverAppBar的底部,便开始溢出。
我想要的行为是,当我开始滚动Sliver App Bar时,也必须立即开始滚动,以确保没有溢出。 (应用栏和标签栏之间的距离必须始终保持不变)
正如您在赠予中所看到的那样,一旦我开始滚动文本,就会溢出。 Here是我的意思。
构建方法:
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: NestedScrollView(
controller: _scrollViewController,
headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: Colors.green,
pinned: true,
floating: true,
expandedHeight: 400,
forceElevated: boxIsScrolled,
flexibleSpace: Column(
children: <Widget>[
Stack(
alignment: Alignment.center,
overflow: Overflow.visible,
children: <Widget>[
Image(
fit: BoxFit.cover,
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width,
image: NetworkImage(
'https://image.freepik.com/free-photo/soccer-field-spotlight-background-stadium_46250-1363.jpg'),
),
Positioned(
width: MediaQuery.of(context).size.width,
bottom: -75,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 45),
child: Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: '22K',
style: TextStyle(
fontSize: 20,
color: Colors.black87,
fontWeight: FontWeight.bold),
),
TextSpan(text: '\n'),
TextSpan(
text: 'Connections',
style: TextStyle(color: Colors.black87),
),
],
),
textAlign: TextAlign.center,
style: DefaultTextStyle.of(context).style,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(40),
child: Image(
width: 130,
height: 130,
image: NetworkImage(
'https://lookyourbestbeyourbest.files.wordpress.com/2011/11/image-3.jpeg',
),
),
),
Padding(
padding: const EdgeInsets.only(top: 45),
child: Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: '12K',
style: TextStyle(
fontSize: 20,
color: Colors.black87,
fontWeight: FontWeight.bold),
),
TextSpan(text: '\n'),
TextSpan(
text: 'Connections',
style: TextStyle(color: Colors.black87),
),
],
),
textAlign: TextAlign.center,
style: DefaultTextStyle.of(context).style,
),
),
],
),
),
],
),
SizedBox(
height: 85,
),
Container(
child: RichText(
text: TextSpan(
text: 'John Dory',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
),
],
),
bottom: TabBar(
tabs: <Widget>[
Tab(
text: "Home",
icon: Icon(Icons.home),
),
Tab(
text: "Example page",
icon: Icon(Icons.help),
)
],
controller: _tabController,
),
)
];
},
body: TabBarView(
children: <Widget>[
PageOne(),
PageTwo(),
],
controller: _tabController,
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.control_point),
onPressed: () {
_tabController.animateTo(1,
curve: Curves.bounceInOut, duration: Duration(milliseconds: 10));
_scrollViewController
.jumpTo(_scrollViewController.position.maxScrollExtent);
},
),
);
}
}
对不起,这么多代码。 谢谢