堆栈小部件中的Flutter show 2小部件
堆栈小部件中的Flutter show 2小部件
提问于 2020-05-22 22:30:57
我有2个窗口小部件，我需要在堆栈窗口小部件中显示我想要的
我的代码是
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(top: statusBarHeight * 0.8),
height: height * 0.4,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/place2.jpg',
),
fit: BoxFit.fill,
),
),
),
ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30), topLeft: Radius.circular(30)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: height * 0.03,
),
Container(
height: height * 0.01,
width: width * 0.1,
color: Colors.pink,
),
SizedBox(
height: height * 0.031,
),
Container(
width: width,
margin: EdgeInsets.only(left: 10),
child: Text(
'PLACES',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 30),
),
),
SizedBox(
height: height * 0.02,
),
Places(),
Places(),
Places(),
Places(),
Places(),
],
),
),
)
],
),正如在代码中一样，我在Stack小部件中有两个小部件Container和ClipRRect，但它没有给我预期的输出，它只在整个屏幕上显示了第二个小部件ClipRRect，我认为容器就在那个小部件后面。
如果我用align包装ClipRRect小部件并设置alignment: Alignment.bottomCenter,，它将显示以下输出
我不知道为什么两个小部件会相互重叠
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-22 22:48:48
堆叠窗口小部件添加有顺序的东西，它首先添加您的容器，然后在它上面添加您的其他窗口小部件，我认为问题是您的第二个窗口小部件具有整个屏幕高度的大小并覆盖其他窗口小部件，所以您可以为它设置高度并将其底部居中对齐，以便您的容器可以显示为您想要的显示。
下面的代码可以给出一个想法，我希望。
使用填充和滚动到第一个小工具的编辑答案：
Stack(
children: <Widget>[
Container(
height: height * 0.4,
child: Placeholder(),
),
SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(top: height * 0.4),
child: ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30), topLeft: Radius.circular(30)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: height * 0.03,
),
Container(
height: height * 0.01,
width: width * 0.1,
color: Colors.pink,
),
SizedBox(
height: height * 0.031,
),
Container(
width: width,
margin: EdgeInsets.only(left: 10),
child: Text(
'PLACES',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 30),
),
),
SizedBox(
height: height * 0.02,
),
Placeholder(fallbackHeight: 140, fallbackWidth: width,),
Placeholder(fallbackHeight: 140, fallbackWidth: width,),
Placeholder(fallbackHeight: 140, fallbackWidth: width,),
Placeholder(fallbackHeight: 140, fallbackWidth: width,),
Placeholder(fallbackHeight: 140, fallbackWidth: width,),
],
),
),
),
),
)
],
),
如果您愿意，您可以在ClipRRect上将SingleChildScrollView的位置更改为Padding，这取决于您的选择。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61957311
复制相关文章
相似问题
腾讯云开发者
