[英]Positioned Widget is not scrolling even with all positional arguments
I would like to make some information of a Profile Page scrollable.我想让个人资料页面的一些信息可滚动。 For the layout I used a stack as a parent widget and filled it with Positioned Widgets.对于布局,我使用了一个堆栈作为父窗口小部件,并用 Positioned Widgets 填充它。 I filled the Positioned Widget with all positional arguments, which allowed me to scroll it when I placed it in the middle of the screen.我用所有位置 arguments 填充了 Positioned Widget,这让我可以在将它放在屏幕中间时滚动它。 It seems like the further down I push the widget, the smaller the area to scroll gets.似乎我将小部件向下推得越深,滚动的区域就越小。 Until the area kind of disappears.直到该区域消失。
The last Positioned Widget is the one I want to make scrollable.最后一个定位小部件是我想要滚动的那个。 I also used it with fix numbers, which didn't help.我还将它与修复数字一起使用,但没有帮助。
I am new to programming, so I hopefully could make my problem clear.我是编程新手,所以我希望能把我的问题说清楚。 Thanks in advance for helping me out.在此先感谢您帮助我。
Here is my code:这是我的代码:
return Scaffold(
appBar: AppBar(
elevation: 2,
leading: BackButton(onPressed: () {
Navigator.pop(context,
MaterialPageRoute(builder: (context) => eventHomeScreen()));
}),
backgroundColor: Colors.teal,
title: Text('Leute', style: TextStyle(fontSize: 28)),
actions: [
IconButton(
iconSize: 26,
icon: Icon(Icons.chat),
tooltip: 'Chat-Anfrage schicken',
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => chatRequestSentScreen.withUser(user)));
},
)
],
),
body: Stack(
alignment: Alignment.bottomCenter,
clipBehavior: Clip.none,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 1,
height: MediaQuery.of(context).size.height * .35,
decoration: BoxDecoration(
image: DecorationImage(
image: user.getProfilePicture(),
fit: BoxFit.cover,
),
),
),
Positioned(
bottom: -MediaQuery.of(context).size.height * 0.19,
child: Card(
color: Colors.teal.shade50,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
)),
elevation: 0,
child: Container(
width: MediaQuery.of(context).size.width * 1,
height: MediaQuery.of(context).size.height * 0.26,
child: Column(
children: [
Text(
user.getFullName(),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
Text(user.getCurrentAge().toString() + " Jahre",
style: TextStyle(
fontSize: 22,
)),
Text('Zuletzt aktiv: Heute',
style: TextStyle(
color: Colors.grey,
fontSize: 16,
)),
SizedBox(
height: 10,
),
Container(
margin: EdgeInsets.symmetric(horizontal: 20),
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 5),
child: Text(user.getBio(),
maxLines: 3,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
)),
),
SizedBox(
height: 50,
),
],
),
),
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.45,
left: 0.0,
right: 0.0,
bottom: -MediaQuery.of(context).size.height * 0.55,
child: Container(
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
)),
width: MediaQuery.of(context).size.width * 1,
height: MediaQuery.of(context).size.height * 0.4,
child:
Container(
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 5),
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: SharedScreenFeatures.getSports(
user.getSports()),
),
),
),
),
),
],
),
);
}
}```
You will be fine if you just wrap your container inside a SingleChildScrollView
如果你只是将容器包装在SingleChildScrollView
中,你会没事的
The child widget inherits constraints from the parent.子部件从父部件继承约束。 I added a parent container with height: double.infinity.我添加了一个高度为 double.infinity 的父容器。 Also the segment_two container I set a minimum height of 150 otherwise you will give pixel overflow.另外,我将 segment_two 容器的最小高度设置为 150,否则会出现像素溢出。 Be careful with your ratios on sizing.请注意您的尺码比例。
class TestPositioned extends StatefulWidget {
TestPositioned({Key? key}) : super(key: key);
@override
State<TestPositioned> createState() => _TestPositionedState();
}
class _TestPositionedState extends State<TestPositioned> {
segment_one(BuildContext context)
{
return Container(
width: MediaQuery.of(context).size.width * 1,
height: MediaQuery.of(context).size.height * .35,
decoration: BoxDecoration(
border:Border.all(color:Colors.grey)),
child:FittedBox(
fit:BoxFit.fitHeight,
child:SizedBox(
width:200,
height:200,
child: Image.asset("assets/images/apple.jpg"),
),
),
);
}
segment_two(BuildContext context)
{
return
Positioned(
bottom: -MediaQuery.of(context).size.height * 0.01,
child:
Container(
width: MediaQuery.of(context).size.width * 1,
height: MediaQuery.of(context).size.height * 0.26>150?MediaQuery.of(context).size.height * 0.26:150,
child:Card(
color: Colors.teal.shade50,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
)),
elevation: 0,
child: Column(
children: [
Expanded(child:Text("full Name", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 24, ),)),
Expanded(child:Text("current age" + " name",style: TextStyle(fontSize: 22,))),
Expanded(child:Text('abcdefg: hijklmn',style: TextStyle(color: Colors.grey,fontSize: 16,))),
SizedBox(height: 10,),
Container(margin: EdgeInsets.symmetric(horizontal: 10),
padding:EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child:
Expanded(child:Text("bio",maxLines: 3,overflow: TextOverflow.ellipsis,textAlign: TextAlign.center,
style: TextStyle( fontSize: 20,)))
)
,
SizedBox(height: 10,),
],
),
)));
}
@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title: Text("Stacked Position")),body:
Container(
height: double.infinity,child:Stack(
children: [
segment_one(context),
segment_two(context),
],)));
}
}
I solved it, which took me quite a while but now it is working perfectly for my purposes.我解决了它,这花了我很长一段时间,但现在它可以完美地满足我的目的。 I am still using the stack but to push the content down to where it is needed, I used a transparent container.我仍在使用堆栈,但为了将内容推送到需要的地方,我使用了一个透明容器。 Now the MediaQuery isn't negative anymore.现在 MediaQuery 不再是负数了。 Might not be the perfect answer, but it works.可能不是完美的答案,但它确实有效。
return Scaffold(
backgroundColor: Colors.teal.shade50,
appBar: AppBar(
elevation: 2,
leading: BackButton(onPressed: () {
Navigator.pop(context,
MaterialPageRoute(builder: (context) => eventHomeScreen()));
}),
backgroundColor: Colors.teal,
title: Text('Leute', style: TextStyle(fontSize: 28)),
actions: [
IconButton(
iconSize: 26,
icon: Icon(Icons.chat),
tooltip: 'Chat-Anfrage schicken',
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => chatRequestSentScreen.withUser(user)));
},
)
],
),
body: Stack(
children: [
Column(children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * .33,
decoration: BoxDecoration(
image: DecorationImage(
image: user.getProfilePicture(),
fit: BoxFit.cover,
),
),
),
]),
Positioned(
top: MediaQuery.of(context).size.height * .27,
child: Container(
decoration: BoxDecoration(
color: Colors.teal.shade50,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
)),
width: MediaQuery.of(context).size.width * 1,
child: Column(
children: [
Text(
user.getFullName(),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
Text(user.getCurrentAge().toString() + " Jahre",
style: TextStyle(
fontSize: 22,
)),
Text('Zuletzt aktiv: Heute',
style: TextStyle(
color: Colors.grey,
fontSize: 16,
)),
],
),
),
),
SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * .39,
color: Colors.transparent,
),
Container(
height: MediaQuery.of(context).size.height * .15,
width: MediaQuery.of(context).size.width * 1,
color: Colors.teal.shade50,
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 0),
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Text(
user.getBio(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
),
),
),
),
Container(
height: MediaQuery.of(context).size.height * .4,
width: MediaQuery.of(context).size.width *1 ,
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
)),
child: Container(
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 0),
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children:
SharedScreenFeatures.getSports(user.getSports()),
),
),
),
),
],
),
),
],
),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.