Flutter项目——静态页面布局

showMeizi

已于 2022-11-17 16:41:14 修改

阅读量636

点赞数

文章标签： flutter android

于 2022-11-16 16:45:27 首次发布

本文链接：https://blog.csdn.net/m0_48132830/article/details/127886639

版权

本文介绍了如何在Flutter项目中实现静态页面布局，包括顶部导航栏、左侧抽屉目录、底部导航和内容区域联动。同时，详细讲解了使用flutter_screenutil插件进行屏幕像素适配的方法，如设置宽度、高度、圆角和字体大小，并提供了相关代码示例。

摘要由CSDN通过智能技术生成

1，项目基本布局样式

顶部导航栏

appBar: AppBar(

title: Text('影院'),

centerTitle: true,

actions: <Widget>[

// 添加我们需要的图标右侧搜索

IconButton(

icon: Icon(Icons.search),

onPressed: (){},

)

左侧抽屉目录

// 侧边栏, 也是脚手架工具提供给我们的

drawer: Drawer(
  // ListView是一个垂直排列的容器
  child: ListView(
    // 手动添加padding 为0, 去掉侧边栏默认的内间距
    padding: EdgeInsets.all(0),
    children: <Widget>[
      // Drawer 顶部区域
      UserAccountsDrawerHeader(
        accountName: Text('心_语'),
        accountEmail: Text('12