dart 提高卡片中的图像抖动

fcy6dtqo  于 5个月前  发布在  其他
关注(0)|答案(1)|浏览(32)

我是新的Flutter,我想创建简单的设计菜单应用程序如下图所示.我试过下面的代码,但它没有给予相同的设计,有什么办法来实现它?

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"))),
          ),
        ),
      ],
    ),
  ),

字符串

dxxyhpgq

dxxyhpgq1#

您似乎正在尝试使用Flutter创建菜单应用设计,并且在实现所需布局时遇到了问题。您提供的代码似乎创建了一个基本布局,其中堆栈顶部包含一个彩色容器,下面是一张卡片,显示一个图像。
要创建一个类似于您所描述的设计,您可能需要调整布局和样式。

import 'package:flutter/material.dart';

    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("Menu App Design"),
            ),
            body: Stack(
              children: [
                Container(
                  color: Colors.lightBlueAccent,
                  height: MediaQuery.of(context).size.height * 0.3, // Adjust the height of the colored container
                ),
                Positioned(
                  top: MediaQuery.of(context).size.height * 0.2, // Adjust the positioning of the card
                  right: 10,
                  left: 10,
                  child: Card(
                    elevation: 5,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: ListTile(
                      leading: SizedBox(
                        height: 100.0, // Adjust the height of the image container
                        width: 100.0, // Adjust the width of the image container
                        child: Image.asset("assets/images/test.png"),
                      ),
                      title: Text('Menu Item'),
                      subtitle: Text('Description of the menu item'),
                      // Add other content for your menu item as needed
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }

字符串

相关问题