从0开始写一个基于Flutter的开源中国客户端（5）——App整体布局框架搭建

最新推荐文章于 2024-11-16 22:01:39 发布

2401_84121798

最新推荐文章于 2024-11-16 22:01:39 发布

阅读量969

点赞数 14

CC 4.0 BY-SA版权

分类专栏：程序员文章标签： flutter 开源

本文链接：https://blog.csdn.net/2401_84121798/article/details/137962065

| 4 | 从0开始写一个基于Flutter的开源中国客户端（4）
Flutter布局基础 |
| 👉5 | 从0开始写一个基于Flutter的开源中国客户端（5）
App整体布局框架搭建 |
| 6 | 从0开始写一个基于Flutter的开源中国客户端（6）
各个静态页面的实现 |
| 7 | 从0开始写一个基于Flutter的开源中国客户端（7）
App网络请求和数据存储 |
| 8 | 从0开始写一个基于Flutter的开源中国客户端（8）
插件的使用 |

App整体布局框架搭建

在我们日常生活中经常使用的App比如微信、微博、QQ等，基本上都是使用首页底部多个Tab可切换页面，加上可侧滑的菜单这种布局方式来组合。基于Flutter的开源中国客户端也是使用这种布局组合来实现的App。本篇要实现的页面效果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

下面一步步来完成这个布局框架的搭建。

新建项目

在AndroidStudio中，通过File -> New -> New Flutter Project...创建一个新的Flutter工程。

使用MaterialApp和Scaffold组件构建首页

在新创建的Flutter工程中，删除lib/main.dart中的代码，并编写下面的代码：

import ‘package:flutter/material.dart’;

void main() {
runApp(new MyApp());
}

// MyApp是一个有状态的组件，因为页面标题，页面内容和页面底部Tab都会改变
class MyApp extends StatefulWidget {
@override
State createState() => new MyOSCClientState();
}

class MyOSCClientState extends State {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: new ThemeData(
// 设置页面的主题色
primaryColor: const Color(0xFF63CA6C)
),
home: new Scaffold(
appBar: new AppBar(
// 设置AppBar标题
title: new Text(“My OSC”,
// 设置AppBar上文本的样式
style: new TextStyle(color: Colors.white)
),
// 设置AppBar上图标的样式
iconTheme: new IconThemeData(color: Colors.white)
),
body: new Text(“MyOSC Client”)
),
);
}
}

上面的代码中，为MaterialApp设置了theme参数，主要是为了改变页面主题颜色为绿色，在Scaffold的appBar属性中，为title设置了颜色为白色，如果不设置的话，默认为黑色，appBar的iconTheme属性也设置为了白色主题，如果不设置的话，AppBar上的图标默认为黑色。