我使用Flutter来建立一个配置文件屏幕.我想建立一个配置文件屏幕像Instagram的配置文件屏幕,包括多个小部件,如用户背景图像,图标,用户信息和标签栏显示用户旧帖子或用户图像,但现在我can't scroll down this screen
我希望这个屏幕可以向下滚动查看标签栏的帖子或图片,这样向下滚动后背景图片、用户图标和其他用户信息就会隐藏起来
下面是我代码的一部分
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height *
200, // Adjust the height according to your needs,
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
ProfileWidget(),
],
)));
}
//include prodfile icon & profile backgroundimage
Widget ProfileWidget() {
//control icon image location
final _top = MediaQuery.of(context).size.height * 1 / 3 -
MediaQuery.of(context).size.height / 11.5;
final HalfWidth = MediaQuery.of(context).size.width / 2;
//username shower
final bottom = profileHeight / 9;
return Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Container(
margin: EdgeInsets.only(bottom: bottom),
//background image control
child: BGIImage(),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
height: MediaQuery.of(context).size.height / 20,
width: MediaQuery.of(context).size.width / 5,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(width: 0.8, color: Colors.white),
color: Colors.orange),
child: IconButton(
//add the function edit user icon
onPressed: () {
_showSelectPhotoOptions(context);
//print(MediaQuery.of(context).size.height);
//print(MediaQuery.of(context).size.width);
},
icon: Icon(
Icons.edit,
),
),
),
),
//Icon UI control
Positioned(top: _top, child: IconImage()),
Positioned(top: _top * 1.6, child: Showusername()),
Positioned(top: _top * 1.75, child: buildContent()),
Positioned(top: _top * 1.9, child: dynamicBadge()),
Positioned(
top: _top * 2.15,
right: HalfWidth * 1.25,
child: FollowingLayer()),
Positioned(
top: _top * 2.15, right: HalfWidth * 0.4, child: FollowerLayer()),
Positioned(top: _top * 2.4, child: PostOrGallery()),
]);
}
//profile icon source & UI control
Widget IconImage() => CircleAvatar(
radius: profileHeight / 2.3,
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Image.network(
_userIcon,
errorBuilder: (context, error, stackTrace) {
return const Icon(Icons.error);
},
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
),
);
},
),
),
);
//profile background image source & UI control
Widget BGIImage() => Container(
child: Image.network(
_UserBGI,
width: double.infinity,
height: coverHeight,
fit: BoxFit.fill,
errorBuilder: (context, error, stackTrace) {
return const Icon(Icons.error);
},
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
),
);
},
),
);
Widget Showusername() => Container(
margin: EdgeInsets.only(top: 10),
child: Text(
_username,
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w400,
color: Colors.black,
),
),
);
Widget buildContent() => Container(
margin: EdgeInsets.only(top: 10),
child: Text(
_Selfintro,
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w400,
color: Colors.black,
),
),
);
Widget dynamicBadge() => Container(
margin: EdgeInsets.only(top: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.coffee_outlined, color: Colors.black),
SizedBox(
width: 5,
),
Icon(
Icons.book_outlined,
color: Colors.black,
),
SizedBox(
width: 5,
),
Icon(Icons.rocket_launch_outlined, color: Colors.black),
],
),
);
Widget FollowingLayer() => Container(
// the Expanded widget lets the columns share the space
child: Column(
// align the text to the left instead of centered
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'Following',
style: TextStyle(fontSize: 14, color: Colors.black),
),
Text(
'10000',
style: TextStyle(fontSize: 16, color: Colors.black),
),
],
),
);
Widget FollowerLayer() => Container(
// the Expanded widget lets the columns share the space
child: Column(
// align the text to the left instead of centered
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'Follower',
style: TextStyle(fontSize: 14, color: Colors.black),
),
Text(
'10000',
style: TextStyle(fontSize: 16, color: Colors.black),
),
],
),
);
Widget PostOrGallery() => Container(
height: MediaQuery.of(context).size.height *
20, // Adjust the height according to your needs,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: DefaultTabController(
length: 2,
child: new Scaffold(
body: new NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
new SliverAppBar(
backgroundColor: ui.Color.fromARGB(255, 209, 167, 107),
toolbarHeight: MediaQuery.of(context).size.height / 100,
floating: true,
pinned: true,
snap: true,
bottom: new TabBar(
tabs: <Tab>[
new Tab(
icon: Icon(
Icons.content_copy_outlined,
color: Colors.black,
),
),
new Tab(
icon: Icon(
Icons.collections_outlined,
)),
], // <-- total of 2 tabs
),
),
];
},
body: new TabBarView(
children: <Widget>[
Center(child: CurrentUserPost()),
Center(child: CurrentUserPost()),
],
),
),
),
));
谢谢观看并回答我的问题!
我一直在尝试使用 ListView,但它没有帮助
1条答案
按热度按时间nfs0ujit1#
使用
singlechildscrollView
PackageScaffold
小部件