如何在容器内设置图像，同时也可以在容器外部展开。
如何在容器内设置图像，同时也可以在容器外部展开。
提问于 2022-02-23 12:45:21
我试着尽我所能对它进行编码，但它仍然不能移动。我试着把这些都叠起来，然后我把图片作为第二个孩子放进去，即使我调整了容器的宽度，图像也出不了卡，卡垫被粘在那里，我什么也不能改变，我怎么修复它呢？
下面是示例设计
这是我的密码
children: [
SizedBox(height: 37),
const Text("Hey Mishal,",
style: TextStyle(
fontSize: 26,
color: Color(0xFF0D1333),
fontWeight: FontWeight.bold,
)),
const Text("Find a course you want to learn",
style: TextStyle(
fontSize: 20,
color: Color(0xFF61688B),
height: 2,
)),
Container(
height: 150,
width: 357,
alignment: Alignment.topLeft,
margin: const EdgeInsets.symmetric(vertical: 30),
decoration: BoxDecoration(
color: kDeepBlueTheme,
borderRadius: BorderRadius.circular(15)),
child: Stack(
children: [
Card(
color: Colors.blueAccent,
child: Padding(
padding: const EdgeInsets.only(left: 15, top: 23),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// SizedBox(height: 30, width: 100,),
const Text('50% off',
style: TextStyle(
color: Colors.white,
fontSize: 27,
fontWeight: FontWeight.bold)),
const SizedBox(
height: 5,
),
const Text('For Any Courses',
style: TextStyle(
letterSpacing: 2,
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w300)),
const SizedBox(
height: 6,
),
ElevatedButton(
//on pressed
onPressed: () async {},
//text to shoe in to the button
child: const Text('Join Now!',
style: TextStyle(color: kMainTheme)),
//style section code here
style: ButtonStyle(
elevation:
MaterialStateProperty.all<double>(0),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
)),
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.black),
),
),
]),
),
),
Positioned(
bottom: 1,
left: 100,
child: Image.asset(
'assets/person_home.png',
height: 230,
),
)
],
),
),
],这是我的结果，
我怎样才能做到这一点？
回答 2
Stack Overflow用户
发布于 2022-02-23 13:06:01
尝试此结果将如图..中所示
Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 400,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blueGrey,
),
),
),
Row(
children: [
const Padding(
padding:EdgeInsets.only(left: 20,right: 5),
child: Text('hello'),
),
Spacer(),
SizedBox(
height: 700,
child: Image.asset('assets/images/place_holder_avatar.png',fit: BoxFit.cover,),
),
],
),
],
)Stack Overflow用户
发布于 2022-02-23 13:17:00
用一个SizedBox包你的堆栈，并给它一个比卡的高度更高的高度，使用媒体查询高度使它响应。
SizedBox(
height: 220,
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
height: 200,
width: double.infinity,
padding: const EdgeInsets.all(8.0),
child: Card(
color: Colors.blueAccent,
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('50% off',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold)),
const SizedBox(
height: 5,
),
const Text('For Any Courses',
style: TextStyle(
letterSpacing: 2,
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w300)),
const SizedBox(
height: 6,
),
ElevatedButton(
//on pressed
onPressed: () async {},
//text to shoe in to the button
child: const Text('Join Now!',
style: TextStyle(color: Colors.white)),
//style section code here
style: ButtonStyle(
elevation: MaterialStateProperty.all<double>(0),
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
)),
backgroundColor:
MaterialStateProperty.all<Color>(Colors.black),
),
),
]),
),
),
),
Positioned(
right: 0,
top: 0,
child: Image.network(
'https://i.ibb.co/7Kr3Vc2/Screenshot-2022-02-23-at-6-11-05-PM-removebg-preview.png',
fit: BoxFit.cover,
height: 210,
),
)
],
),
),
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71237192
复制相关文章
相似问题
腾讯云开发者
