[英]Flutter SingleChildScrollView not working inside Stack
So I'm trying to make a screen that has a Stack with scroll and I'm using AlignPositioned package to align the positioned widgets in stack I tried using expanded widgets LayoutBuilders I've just can not figure out how to make it dynamic ( https://pub.dev/packages/align_positioned )所以我正在尝试制作一个带有滚动堆栈的屏幕,并且我正在使用 AlignPositioned 包来对齐堆栈中的定位小部件我尝试使用扩展小部件 LayoutBuilders 我只是不知道如何使它成为动态的( https ://pub.dev/packages/align_positioned )
There is a lot of city names down below and the screen only can be scrolled to 1-2 of them depending on the height of container.下面有很多城市名称,根据容器的高度,屏幕只能滚动到其中的 1-2 个。 Here is my current code whenever I set a constant height to Container the UI doesn't throw an error but the screen is not completely scrollable
这是我当前的代码,每当我为 Container 设置恒定高度时,UI 不会引发错误,但屏幕不能完全滚动
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Stack(
children: <Widget>[
Positioned(
top: 0,
child: TopArc(), // The blue background circle
),
AlignPositioned(
dy: 40,
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 4),
child: AutoSizeText(
"Choose Your Location",
stepGranularity: 1,
maxLines: 1,
style: TextStyle(
fontSize: 38,
color: Colors.white,
// This is the maximum value then the AutoSizeText widget will shrink it until it can fit a single line.
fontWeight: FontWeight.bold,
),
),
),
),
AlignPositioned(
dy: 90,
alignment: Alignment.topCenter,
child: StreamBuilder<QuerySnapshot>(
stream: Firestore.instance
.collection('locations')
.snapshots(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return CircularProgressIndicator();
}
if (!snapshot.hasData) {
return CircularProgressIndicator();
}
return ContentTile(
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (ctx, int i) {
final document = snapshot.data.documents[i];
return LocationExpansionTile(
document.documentID, document["cityName"]);
},
),
);
},
),
),
],
),
),
)),
);
Replace ListView.builder
with Column
widget and remove all AlignedPositioned instead use Positioned (if it's possible).用
Column
小部件替换ListView.builder
并删除所有 AlignedPositioned 而不是使用 Positioned (如果可能的话)。 Remove parent Container of Stack and add a Container with a height value.移除 Stack 的父 Container 并添加一个具有高度值的 Container。 It'll help the stack to calculate it's size.
它将帮助堆栈计算其大小。 You have to get the final size from your item's list.
您必须从项目列表中获取最终尺寸。 That was the way I could make your code run as you want.
这就是我可以让你的代码按照你的意愿运行的方式。
var _itemsView = GlobalKey();
double _stackHeight;
@override
void initState() {
WidgetsBinding.instance.addPostFrameCallback((_) {
RenderBox stackRB =
_itemsView.currentContext.findRenderObject() as RenderBox;
setState(() {
_stackHeight = stackRB.size.height;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Stack(
children: <Widget>[
Positioned(
...
),
Positioned(
...
),
Positioned(
key: _itemsView,
top: 90,
child: Column(
children: _data.map((i) {
final document = snapshot.data.documents[i];
return LocationExpansionTile(
item.documentID, item["cityName"]);
}),
),
),
Container(
height: _stackHeight + 90,
)
],
),
)),
);
}
我正在处理几乎相同的问题,如果您的 SingleChildScrollView 在定位小部件内,您将必须精确定位的顶部和底部,在我的情况下,我没有按底部,所以我无法滚动下
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.