利用Flutter写一个跨平台的果核APP（2）——界面篇2
前言
紧接上篇文章《利用Flutter写一个跨平台的果核APP（1）——界面篇1》 上篇文章只是将界面的基本框架搭了出来，这篇文章着手实现首页的界面。先来看预览图： android
解析
按照图像的分割线，我将整个首页分割成头部、今日课表部分、消息部分和日知录部分跨域
- 首先是首页的最外层框架部分
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
leading: new IconButton(
icon: Icon(Icons.home),
onPressed: () {
//打开drawer
openDrawer();
},
),
title: new Text("今日"), //设置标题内容
backgroundColor: Color.fromARGB(255, 119, 136, 213), //设置appbar背景颜色
centerTitle: true, //设置标题是否局中
),
body: new ListView(
children: <Widget>[
new Header(), //头部
new BigDivider(),
new TodayKb(), //今日课表
new BigDivider(),
new Message(), //消息
new BigDivider(),
new One() //日知录
],
),
),
);
}
复制代码
由于首页布局较长，因此我选择用了一个ListView将一些控件包裹住，这里的ListView的做用就和android中的Scrollview的做用是同样的。BigDivider类是为了弥补Divider类空闲过小的不足自定义的一个view，我将这个view写在views/customview.dart里面了，因此须要在开头引入bash
import 'package:flutter_guohe/views/customview.dart';
复制代码
customview.dart中的BigDivider类app
import 'package:flutter/material.dart';
//分隔栏
class BigDivider extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new SizedBox(
height: 5.0,
child: new Center(
child: new Container(
height: 5.0,
color: Colors.black12,
),
),
);
}
}
复制代码
剩下的就是依次实现上述的几个类，熟练使用Padding/Column/Row/Container等布局便可,在这里有3个点须要提一下：框架
- 图片资源的引用
- 均分布局的实现
- 利用EventBus实现子控件控制父控件
对于第一个，其实官方文档里有介绍《资源与图像》，可是文档里写的并无说明assets文件夹存放的路径，在这里说明一下，assets文件夹是和lib文件夹同级的，即less
pubspec.yaml文件中添加资源文件的依赖，以下所示：
new AssetImage('assets/imgs/ic_menu_score.png'),
复制代码
代码便可引用该资源文件。ide
第二个 布局
layout_weight,这样的话理解起来就不难了
第三个的使用场景是这样的： flex
完整代码
today.dartui
import 'package:flutter/material.dart';
import 'package:flutter_guohe/common/eventBus.dart';
import 'package:flutter_guohe/views/customview.dart';
class Today extends StatefulWidget {
@override
TodayState createState() => new TodayState();
}
class TodayState extends State<Today> {
//打开drawer
void openDrawer() {
eventBus.fire(new EventOpenDrawer(true));
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
leading: new IconButton(
icon: Icon(Icons.home),
onPressed: () {
//打开drawer
openDrawer();
},
),
title: new Text("今日"), //设置标题内容
backgroundColor: Color.fromARGB(255, 119, 136, 213), //设置appbar背景颜色
centerTitle: true, //设置标题是否局中
),
body: new ListView(
children: <Widget>[
new Header(), //头部
new BigDivider(),
new TodayKb(), //今日课表
new BigDivider(),
new Message(), //消息
new BigDivider(),
new One() //日知录
],
),
),
);
}
}
//首页的头部信息
class Header extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
height: 100.0,
margin: new EdgeInsets.all(8.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Column(
children: <Widget>[
//头像
new Container(
width: 60.0,
height: 60.0,
margin: new EdgeInsets.all(8.0),
decoration: BoxDecoration(
image: DecorationImage(
image: new AssetImage('assets/imgs/ic_menu_score.png'),
//从Assets加载图片
fit: BoxFit.cover,
),
shape: BoxShape.circle,
),
),
new Text(
'查成绩',
textAlign: TextAlign.center,
)
],
),
flex: 1,
),
new Expanded(
child: new Column(
children: <Widget>[
//头像
new Container(
width: 60.0,
height: 60.0,
margin: new EdgeInsets.all(8.0),
decoration: BoxDecoration(
image: DecorationImage(
image: new AssetImage('assets/imgs/ic_menu_pe.png'),
//从Assets加载图片
fit: BoxFit.cover,
),
shape: BoxShape.circle,
),
),
new Text(
'查体育',
textAlign: TextAlign.center,
)
],
),
flex: 1,
),
new Expanded(
child: new Column(
children: <Widget>[
//头像
new Container(
width: 60.0,
height: 60.0,
margin: new EdgeInsets.all(8.0),
decoration: BoxDecoration(
image: DecorationImage(
image: new AssetImage('assets/imgs/ic_menu_bus.png'),
//从Assets加载图片
fit: BoxFit.cover,
),
shape: BoxShape.circle,
),
),
new Text(
'查校车',
textAlign: TextAlign.center,
)
],
),
flex: 1,
),
new Expanded(
child: new Column(
children: <Widget>[
//头像
new Container(
width: 60.0,
height: 60.0,
margin: new EdgeInsets.all(8.0),
decoration: BoxDecoration(
image: DecorationImage(
image: new AssetImage('assets/imgs/ic_menu_system.png'),
//从Assets加载图片
fit: BoxFit.cover,
),
shape: BoxShape.circle,
),
),
new Text(
'校园系统',
textAlign: TextAlign.center,
)
],
),
flex: 1,
),
new Expanded(
child: new Column(
children: <Widget>[
//头像
new Container(
width: 60.0,
height: 60.0,
margin: new EdgeInsets.all(8.0),
decoration: BoxDecoration(
image: DecorationImage(
image: new AssetImage('assets/imgs/ic_menu_more.png'),
//从Assets加载图片
fit: BoxFit.cover,
),
shape: BoxShape.circle,
),
),
new Text(
'更多',
textAlign: TextAlign.center,
)
],
),
flex: 1,
),
],
),
);
}
}
//今日课表
class TodayKb extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Padding(
padding: new EdgeInsets.all(18.0),
child: new Column(
children: <Widget>[
new Container(
child: new Row(
children: <Widget>[
new Icon(
Icons.camera,
color: Colors.black26,
size: 17.0,
),
new Container(
margin: new EdgeInsets.only(left: 5.0),
child: new Text(
'今日课表',
style: new TextStyle(color: Color(0xFF888888)),
),
)
],
),
),
new Divider(
color: Color(0xFF888888),
),
new Container(
margin: new EdgeInsets.only(top: 30.0, bottom: 2.0),
child: new Text("今天竟然没有课~" + "\uD83D\uDE01"),
),
new Container(
margin: new EdgeInsets.only(top: 30.0, bottom: 2.0),
child: new Text('点我查看完整课表',
style: new TextStyle(
color: Color(
0xFF888888,
),
fontSize: 12.0)),
),
],
),
);
}
}
//消息
class Message extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Padding(
padding: new EdgeInsets.all(18.0),
child: new Column(
children: <Widget>[
new Container(
child: new Row(
children: <Widget>[
new Icon(
Icons.message,
color: Colors.black26,
size: 17.0,
),
new Container(
margin: new EdgeInsets.only(left: 5.0),
child: new Text(
'消息',
style: new TextStyle(color: Color(0xFF888888)),
),
)
],
),
),
new Divider(
color: Color(0xFF888888),
),
new Container(
margin: new EdgeInsets.all(10.0),
child: new Text("这里是消息"),
),
new Divider(
color: Color(0xFF888888),
)
],
),
);
}
}
//日知录
class One extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Padding(
padding: new EdgeInsets.all(18.0),
child: new Column(
children: <Widget>[
new Container(
child: new Row(
children: <Widget>[
new Icon(
Icons.email,
color: Colors.black26,
size: 17.0,
),
new Container(
margin: new EdgeInsets.only(left: 5.0),
child: new Text(
'日知录',
style: new TextStyle(color: Color(0xFF888888)),
),
)
],
),
),
new Divider(
color: Color(0xFF888888),
),
new Container(
margin: new EdgeInsets.all(10.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'2018/09/14',
style: new TextStyle(color: Color(0xFF888888)),
),
new Margin(indent: 6.0),
new Image(
image: new NetworkImage(
'http://image.wufazhuce.com/Fn5E1UnrcvN0jwFRiOtDZ2WnQa4N')),
new Margin(indent: 6.0),
new Text(
'Fahmi Ramadhan | 摄影',
style: new TextStyle(color: Color(0xFF888888)),
),
new Margin(indent: 6.0),
new Text(
'全部的爱情，都是两个心灵相通的人胜利，没法相互了解的人失败，没有所谓对错。',
textAlign: TextAlign.center,
style: new TextStyle(color: Color(0xFF888888)),
),
new Margin(indent: 6.0),
new Text(
'《东京爱情故事》',
style: new TextStyle(color: Color(0xFF888888)),
)
],
),
),
new Divider(
color: Color(0xFF888888),
)
],
),
);
}
}
复制代码
customview.dart
import 'package:flutter/material.dart';
//分隔栏
class BigDivider extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new SizedBox(
height: 5.0,
child: new Center(
child: new Container(
height: 5.0,
color: Colors.black12,
),
),
);
}
}
//间隙
class Margin extends StatelessWidget {
final double indent;
const Margin({Key key, this.indent: 0.0}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Container(
margin: new EdgeInsets.all(indent),
);
}
}
复制代码
相关文章
- 1. 利用Flutter写一个跨平台的果核APP（1）——界面篇1
- 2. 利用Flutter写一个跨平台的果核APP（0）——介绍
- 3. 利用Flutter写一个跨平台的果核APP（4）——数据存储
- 4. 利用Flutter写一个跨平台的果核APP（3）——网络请求
- 5. 跨平台技术篇 - 尝试编写一个 Flutter app
- 6. Flutter写第一个跨平台薅羊毛APP（八）--GitHub开源
- 7. 使用Phonegap/Cordova编写跨平台(Android/iOS)应用 (2) -- iOS篇
- 8. protocolBuf的跨平台基础使用2
- 9. Flutter实战2 --- 写一个天气查询的APP
- 10. Flutter写第一个跨平台薅羊毛APP（四）--部署服务器
- 更多相关文章...
- • ionic 平台 - ionic 教程
- • QBC的2种检索方式 - Hibernate教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Java Agent入门实战（一）-Instrumentation介绍与使用
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 利用Flutter写一个跨平台的果核APP（1）——界面篇1
- 2. 利用Flutter写一个跨平台的果核APP（0）——介绍
- 3. 利用Flutter写一个跨平台的果核APP（4）——数据存储
- 4. 利用Flutter写一个跨平台的果核APP（3）——网络请求
- 5. 跨平台技术篇 - 尝试编写一个 Flutter app
- 6. Flutter写第一个跨平台薅羊毛APP（八）--GitHub开源
- 7. 使用Phonegap/Cordova编写跨平台(Android/iOS)应用 (2) -- iOS篇
- 8. protocolBuf的跨平台基础使用2
- 9. Flutter实战2 --- 写一个天气查询的APP
- 10. Flutter写第一个跨平台薅羊毛APP（四）--部署服务器