英文:
Raising Image Flutter Card
问题
我是新手学习Flutter，想要创建一个类似下面图片所示的简单菜单设计...我尝试了下面的代码，但没有得到相同的设计，有没有办法实现它？
[图片在这里][1]
[1]: https://i.stack.imgur.com/oJBrG.png
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("卡片叠加堆叠"),
),
body: Stack(
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
color: Colors.lightBlueAccent),
height: 100,
),
),
Positioned(
top: 60,
right: 10,
left: 10,
child: Card(
child: ListTile(
leading: SizedBox(
height: 150.0,
width: 150.0, // 固定宽度和高度
child: Image.asset("assets/images/test.png"))),
),
),
],
),
),
);
英文:
i'm new to flutter and i wanted to create simple design for menu app as shown in image below ... i tried below code but it didn't give same design, is there any way to achieve it?
Image Here
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Card over stack"),
),
body: Stack(
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
color: Colors.lightBlueAccent),
height: 100,
),
),
Positioned(
top: 60,
right: 10,
left: 10,
child: Card(
child: ListTile(
leading: SizedBox(
height: 150.0,
width: 150.0, // fixed width and height
child: Image.asset("assets/images/test.png"))),
),
),
],
),
),
);
答案1
得分: 0
将Card包裹在Material内，并设置elevation为1。
Material(
elevation: 1, // 这将为阴影提供帮助
child: Card(
child: ListTile(
leading: SizedBox(
height: 150.0,
width: 150.0, // 固定宽度和高度
child: Image.asset("assets/images/test.png"),
),
),
),
);
英文:
Wrap Card inside Material and give elevation of 1
Material(
elevation: 1,//👈 This will help for the elevation
child: Card(
child: ListTile(
leading: SizedBox(
height: 150.0,
width: 150.0, // fixed width and height
child: Image.asset("assets/images/test.png"))),
),
);
答案2
得分: 0
以下是您提供的代码的翻译部分：
尝试这个：
Scaffold(
appBar: AppBar(
title: Text("叠加卡片"),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Stack(
children: <Widget>[
Positioned(
top: 20,
left: 40,
right: 0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.lightBlueAccent,
boxShadow: [
BoxShadow(
color: Colors.grey.shade300,
blurRadius: 5,
spreadRadius: 2,
offset: const Offset(4, 4),
)
]),
height: 150,
child: Padding(
padding: const EdgeInsets.only(left: 75),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('abcdefghiklmn'),
Text('abcdefghiklmn'),
Text('abcdefghiklmn'),
Text('abcdefghiklmn'),//在这里编写任何代码
],
),
),
),
),
Positioned(
top: 0,
child: Container(
height: 150,
width: 100,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.shade200,
blurRadius: 5,
spreadRadius: 2,
offset: const Offset(-3, -3),
)
],
borderRadius: const BorderRadius.all(Radius.circular(20)),
),
child: ClipRRect(
borderRadius: const BorderRadius all(Radius.circular(20)),
child: Image.asset(
'assets/images/test.png',
fit: BoxFit.cover,
),
),
),
),
],
),
),
);
这是您提供的Dart代码的翻译。如果您有任何其他问题或需要进一步的帮助，请随时告诉我。
英文:
Try this:
Scaffold(
appBar: AppBar(
title: Text("Card over stack"),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Stack(
children: <Widget>[
Positioned(
top: 20,
left: 40,
right: 0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.lightBlueAccent,
boxShadow: [
BoxShadow(
color: Colors.grey.shade300,
blurRadius: 5,
spreadRadius: 2,
offset: const Offset(4, 4),
)
]),
height: 150,
child: Padding(
padding: const EdgeInsets.only(left: 75),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('abcdefghiklmn'),
Text('abcdefghiklmn'),
Text('abcdefghiklmn'),
Text('abcdefghiklmn'),//code any here
],
),
),
),
),
Positioned(
top: 0,
child: Container(
height: 150,
width: 100,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.shade200,
blurRadius: 5,
spreadRadius: 2,
offset: const Offset(-3, -3),
)
],
borderRadius: const BorderRadius.all(Radius.circular(20)),
),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(20)),
child: Image.asset(
'assets/images/test.png',
fit: BoxFit.cover,
),
),
),
),
],
),
),
);
This is my result:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论