“Raising Image Flutter Card” 可以翻译为 “凸起图像的Flutter卡片”。

huangapple go评论117阅读模式
英文:

Raising Image Flutter Card

问题

  1. 我是新手学习Flutter,想要创建一个类似下面图片所示的简单菜单设计...我尝试了下面的代码,但没有得到相同的设计,有没有办法实现它?
  2. [图片在这里][1]
  3. [1]: https://i.stack.imgur.com/oJBrG.png
  4. MaterialApp(
  5. home: Scaffold(
  6. appBar: AppBar(
  7. title: Text("卡片叠加堆叠"),
  8. ),
  9. body: Stack(
  10. children: <Widget>[
  11. Align(
  12. alignment: Alignment.topCenter,
  13. child: Container(
  14. decoration: BoxDecoration(
  15. borderRadius: BorderRadius.all(Radius.circular(10.0)),
  16. color: Colors.lightBlueAccent),
  17. height: 100,
  18. ),
  19. ),
  20. Positioned(
  21. top: 60,
  22. right: 10,
  23. left: 10,
  24. child: Card(
  25. child: ListTile(
  26. leading: SizedBox(
  27. height: 150.0,
  28. width: 150.0, // 固定宽度和高度
  29. child: Image.asset("assets/images/test.png"))),
  30. ),
  31. ),
  32. ],
  33. ),
  34. ),
  35. );
英文:

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

  1. MaterialApp(
  2. home: Scaffold(
  3. appBar: AppBar(
  4. title: Text(&quot;Card over stack&quot;),
  5. ),
  6. body: Stack(
  7. children: &lt;Widget&gt;[
  8. Align(
  9. alignment: Alignment.topCenter,
  10. child: Container(
  11. decoration: BoxDecoration(
  12. borderRadius: BorderRadius.all(Radius.circular(10.0)),
  13. color: Colors.lightBlueAccent),
  14. height: 100,
  15. ),
  16. ),
  17. Positioned(
  18. top: 60,
  19. right: 10,
  20. left: 10,
  21. child: Card(
  22. child: ListTile(
  23. leading: SizedBox(
  24. height: 150.0,
  25. width: 150.0, // fixed width and height
  26. child: Image.asset(&quot;assets/images/test.png&quot;))),
  27. ),
  28. ),
  29. ],
  30. ),
  31. ),
  32. );

答案1

得分: 0

Card包裹在Material内,并设置elevation1

  1. Material(
  2. elevation: 1, // 这将为阴影提供帮助
  3. child: Card(
  4. child: ListTile(
  5. leading: SizedBox(
  6. height: 150.0,
  7. width: 150.0, // 固定宽度和高度
  8. child: Image.asset("assets/images/test.png"),
  9. ),
  10. ),
  11. ),
  12. );
英文:

Wrap Card inside Material and give elevation of 1

  1. Material(
  2. elevation: 1,//&#128072; This will help for the elevation
  3. child: Card(
  4. child: ListTile(
  5. leading: SizedBox(
  6. height: 150.0,
  7. width: 150.0, // fixed width and height
  8. child: Image.asset(&quot;assets/images/test.png&quot;))),
  9. ),
  10. );

答案2

得分: 0

以下是您提供的代码的翻译部分:

  1. 尝试这个:
  2. Scaffold(
  3. appBar: AppBar(
  4. title: Text("叠加卡片"),
  5. ),
  6. body: Padding(
  7. padding: const EdgeInsets.all(20),
  8. child: Stack(
  9. children: <Widget>[
  10. Positioned(
  11. top: 20,
  12. left: 40,
  13. right: 0,
  14. child: Container(
  15. decoration: BoxDecoration(
  16. borderRadius: BorderRadius.all(Radius.circular(20)),
  17. color: Colors.lightBlueAccent,
  18. boxShadow: [
  19. BoxShadow(
  20. color: Colors.grey.shade300,
  21. blurRadius: 5,
  22. spreadRadius: 2,
  23. offset: const Offset(4, 4),
  24. )
  25. ]),
  26. height: 150,
  27. child: Padding(
  28. padding: const EdgeInsets.only(left: 75),
  29. child: Column(
  30. mainAxisAlignment: MainAxisAlignment.spaceAround,
  31. crossAxisAlignment: CrossAxisAlignment.start,
  32. children: [
  33. Text('abcdefghiklmn'),
  34. Text('abcdefghiklmn'),
  35. Text('abcdefghiklmn'),
  36. Text('abcdefghiklmn'),//在这里编写任何代码
  37. ],
  38. ),
  39. ),
  40. ),
  41. ),
  42. Positioned(
  43. top: 0,
  44. child: Container(
  45. height: 150,
  46. width: 100,
  47. decoration: BoxDecoration(
  48. boxShadow: [
  49. BoxShadow(
  50. color: Colors.grey.shade200,
  51. blurRadius: 5,
  52. spreadRadius: 2,
  53. offset: const Offset(-3, -3),
  54. )
  55. ],
  56. borderRadius: const BorderRadius.all(Radius.circular(20)),
  57. ),
  58. child: ClipRRect(
  59. borderRadius: const BorderRadius all(Radius.circular(20)),
  60. child: Image.asset(
  61. 'assets/images/test.png',
  62. fit: BoxFit.cover,
  63. ),
  64. ),
  65. ),
  66. ),
  67. ],
  68. ),
  69. ),
  70. );

这是您提供的Dart代码的翻译。如果您有任何其他问题或需要进一步的帮助,请随时告诉我。

英文:

Try this:

  1. Scaffold(
  2. appBar: AppBar(
  3. title: Text(&quot;Card over stack&quot;),
  4. ),
  5. body: Padding(
  6. padding: const EdgeInsets.all(20),
  7. child: Stack(
  8. children: &lt;Widget&gt;[
  9. Positioned(
  10. top: 20,
  11. left: 40,
  12. right: 0,
  13. child: Container(
  14. decoration: BoxDecoration(
  15. borderRadius: BorderRadius.all(Radius.circular(20)),
  16. color: Colors.lightBlueAccent,
  17. boxShadow: [
  18. BoxShadow(
  19. color: Colors.grey.shade300,
  20. blurRadius: 5,
  21. spreadRadius: 2,
  22. offset: const Offset(4, 4),
  23. )
  24. ]),
  25. height: 150,
  26. child: Padding(
  27. padding: const EdgeInsets.only(left: 75),
  28. child: Column(
  29. mainAxisAlignment: MainAxisAlignment.spaceAround,
  30. crossAxisAlignment: CrossAxisAlignment.start,
  31. children: [
  32. Text(&#39;abcdefghiklmn&#39;),
  33. Text(&#39;abcdefghiklmn&#39;),
  34. Text(&#39;abcdefghiklmn&#39;),
  35. Text(&#39;abcdefghiklmn&#39;),//code any here
  36. ],
  37. ),
  38. ),
  39. ),
  40. ),
  41. Positioned(
  42. top: 0,
  43. child: Container(
  44. height: 150,
  45. width: 100,
  46. decoration: BoxDecoration(
  47. boxShadow: [
  48. BoxShadow(
  49. color: Colors.grey.shade200,
  50. blurRadius: 5,
  51. spreadRadius: 2,
  52. offset: const Offset(-3, -3),
  53. )
  54. ],
  55. borderRadius: const BorderRadius.all(Radius.circular(20)),
  56. ),
  57. child: ClipRRect(
  58. borderRadius: const BorderRadius.all(Radius.circular(20)),
  59. child: Image.asset(
  60. &#39;assets/images/test.png&#39;,
  61. fit: BoxFit.cover,
  62. ),
  63. ),
  64. ),
  65. ),
  66. ],
  67. ),
  68. ),
  69. );

This is my result:

“Raising Image Flutter Card” 可以翻译为 “凸起图像的Flutter卡片”。

huangapple
  • 本文由 发表于 2023年3月1日 15:00:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/75600441.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定