Flutter 写一个安卓的布局，包含DrawerLayout、BottomNavigationBar

最新推荐文章于 2025-05-07 09:00:00 发布

Luyifei666

最新推荐文章于 2025-05-07 09:00:00 发布

阅读量528

点赞数

分类专栏： Flutter

本文链接：https://blog.youkuaiyun.com/qq_24531461/article/details/85541357

版权

Flutter 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用Flutter框架设计UI的示例，展示了如何创建带有黄色背景的应用，包含标题栏、红色主体区域、抽屉菜单、底部导航栏和浮动操作按钮等组件。通过具体的代码实现，帮助读者理解Flutter布局和组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo

贴代码：

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
      home: new Scaffold(
        backgroundColor: Colors.yellowAccent,
        appBar: new AppBar(
          title: new Text("My Title"),
          actions: <Widget>[
            new IconButton(
              icon: new Icon(Icons.shopping_cart),
              onPressed: () {},
            ),
            new IconButton(
              icon: new Icon(Icons.monetization_on),
              onPressed: () {},
            )
          ],
        ),
        body: new Container(
          color: Colors.red,
        ),
        drawer: new Drawer(
          child: new ListView(
            children: <Widget>[
              new DrawerHeader(
                child: new Text("Drawer Header"),
                decoration: new BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              new Text("Item 1"),
              new Text("Item 2"),
              new Text("Item 3"),
              new Text("Item 4"),
              new Text("Item 5"),
              new Text("Item 6"),
            ],
          ),
        ),
        bottomNavigationBar: new BottomNavigationBar(items: [
          new BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text("Home"),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.search),
            title: new Text("Search"),
          )
        ]),
        floatingActionButton: new FloatingActionButton(
          onPressed: () {},
          child: new Icon(Icons.add),
        ),
      ),
    ));

运行截图