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

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

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(&quot;Card over stack&quot;),
    ),
    body: Stack(
      children: &lt;Widget&gt;[
        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(&quot;assets/images/test.png&quot;))),
          ),
        ),
      ],
    ),
  ),
);

答案1

得分: 0

Card包裹在Material内,并设置elevation1

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,//&#128072; 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(&quot;assets/images/test.png&quot;))),
          ),
);

答案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(&quot;Card over stack&quot;),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Stack(
          children: &lt;Widget&gt;[
            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(&#39;abcdefghiklmn&#39;),
                  Text(&#39;abcdefghiklmn&#39;),
                  Text(&#39;abcdefghiklmn&#39;),
                  Text(&#39;abcdefghiklmn&#39;),//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(
                    &#39;assets/images/test.png&#39;,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );

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:

确定