如何解决尝试在Flutter / Dart中获得所需的UI时出现什么错误?
我试图通过以下代码来实现图像高亮部分所示的效果,但这会产生与直觉相反的错误结果。
为避免混淆,我在说的是较小的容器的中间与橙色的大容器的底部对齐的效果
我的代码如下:
Size size = MediaQuery.of(context).size;
double height = size.height;
double width = size.width;
return Column(
children: [
Expanded(
flex: 3,child: Container(color: Colors.white),),Positioned(
top: height * (3 / 5) - height * 0.15 / 2,child: Container(
color: Colors.green,height: height * 0.15,child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
Container(
height: height * 0.15,width: width * 0.45,color: Colors.red,Container(
height: height * 0.15,color: Colors.blue,)
],Expanded(
flex: 5,child: Container(color: Colors.black),],);
解决方法
您将需要使用 Stack 小部件来实现此结果。
Stack(children: [
Container(
height: 230,decoration: BoxDecoration(
color: Colors.orange,)),Column(children: [
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
Container(
height: 100,width: 100,decoration: BoxDecoration(
color: Colors.red,borderRadius: BorderRadius.circular(22))),Container(
height: 100,]),),])
])
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。