gpt4 book ai didi

flutter - 在图像上添加小部件- flutter , Dart

转载 作者:行者123 更新时间:2023-12-03 03:32:00 25 4
gpt4 key购买 nike

我有这样的图像image
我需要在此图像上添加小部件。看起来内容只是在移动屏幕上。我试图寻找一种方法,但我没有得到任何帮助。我尝试使用这样的堆栈:

Container(
child: Stack(
children: <Widget>[
Positioned(
child: Container(
padding: EdgeInsets.fromLTRB(60, 110, 60, 90),
//body
),
),
Container(width: 1000,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/transparentMobile.png'),
fit: BoxFit.fill)),
),
],
),
),
它在我的手机上正常工作: image
但在其他手机上,看起来却大不相同。如何为多个屏幕编写单个代码?

最佳答案

终于我有了办法。我没有认真研究代码,而是将图像分为三部分:
顶部:top
正文:body
底部:bottom
并将它们添加到这样的列中:

AspectRatio(
aspectRatio: 1/2,
child: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/Mobile/mobileTop.png'),
fit: BoxFit.fill
)
),
),
),
Expanded(
flex: 7,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/Mobile/mobileBody.png',),
fit: BoxFit.fill
)
),
height: 100,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
automaticallyImplyLeading: false,
title: Text('My Application'),
),
body: Center(
child: Text(
'Hello World!',
style: TextStyle(color: Colors.black),
),
),
backgroundColor: Colors.white,
),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/Images/Mobile/mobileBottom.png'),
fit: BoxFit.fill
)
),
),
),

],
),
),
),
现在该图像在大多数设备上看起来都非常相似: image
谢谢你的帮助!

关于flutter - 在图像上添加小部件- flutter , Dart ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63343229/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com