用Flutter 写一个简单页面 [复制链接]

2019-10-18 10:03
sergiochanTest 阅读:686 评论:0 赞:1
Tag:  Flutter

Flutter 概况

Flutter是谷歌的UI工具包,可使用一套代码库,为移动,Web和桌面构建漂亮的原生编译的应用程序。

Flutter实现了一个自绘引擎,使用自身的布局、绘制系统,绘制界面。

Flutter 框架架构图

用Flutter 写一个简单页面

Flutter框架图简单说明:

  • Framework层使用 Dart 实现,Material层 包含Android风格的 Widget,Cupertino层 包含 iOS风格的Widget ,Widgets 层包含Widget ;Rendering层包含控制渲染的库;Animation 层包含动画的库;Painting层包含控制绘制的库;Gestures层包含手势的库;Foundation层 包含基础库(比如确定所属平台(Android、iOS等)的API、又如print、debug 相关的API)。
  • Engine 层使用 C++ 实现,Skia 层是开源的二维图形库。Dart层包含 Dart相关的API,Text 层包含文字绘制展示相关的API。

在 Flutter 中大家所看到的内容都是由 Widget 控制显示的,大家所看到的交互效果也是由 Widget 来控制的。在Flutter 中一切都是 Widget。

本文中,笔者会先容的Widget有

StatelessWidget、 StatefulWidget 、 Text 、 Image 、 FlatButton 、GestureDetector 、ListView 等。

相关Widget先容如下:

  • StatelessWidget 是无状态的 Widget ,当大家要展示的 Widget 不需要改变显示内容的时候,使用StatelessWidget即可;
  • StatefulWidget 是有状态的 Widget ,当大家要展示的 Widget 需要改变显示内容的时候,需要使用 StatefulWidget ;StatefulWidget 的子类相当于存放了State 的配置信息。StatefulWidget的界面显示效果由State 来控制展示。当StatefulWidget 对应的界面数据变化后,调用 setState() 方法,然后系统会运行 buildContext()就可以做到更新界面的效果。
  • Column 用于展示成 列 排列的 Widget;
  • Container 是一个容器Widget;
  • Text用于展示文字,相当于 iOS 中的 UILabel;
  • Image 用于展示图片;
  • FlatButton 相当于 iOS 中的 UIButton ,用于处理交互事件,同时,Flutter中可以使用GestureDetector 对Widget 进行包裹,也可以达到具备交互的效果的目的;
  • ListView 相当于 iOS 中的 UITableView ,用于展示列表内容。
  • ListTile 相当于iOS 中的 UITableViewCell

使用Flutter创建一个简单页面

页面显示Hello World

显示 Hello World需要使用 Text Widget

功能代码如下:

Text('Hello World'),

创建 Flutter 应用方式

  • 笔者使用的工具是 Visual Studio Code
  • 打开Visual Studio Code 后,command + shift + p,然后选择创建Flutter New Project ,之后输入小写字母的项目名即可。
  • 展示Hello World 的相关代码如下:

笔者已经按照自己的理解,加了部分注释

// 应用程序实行入口
void main(List<String> args) {
// 初始化指定的Widget,并把Widget渲染效果绘制到屏幕上
runApp(MaterialApp(
title: '安卓切换任务管理时任务名',
home: QiStatelessApp(),
));
}
// 创建一个继承自Stateless的Widget
class QiStatelessApp extends StatelessWidget {
// 重写build 方法,build 方法返回值为Widget类型,返回内容为屏幕上显示内容。
@override
Widget build(BuildContext context) {
// MaterialApp 控制界面风格为安卓风格
// CupertinoApp 界面风格为iOS 风格
return MaterialApp(
title: '安卓切换任务管理时任务名',
// debugShowCheckedModeBanner: false,
// Scaffold:脚手架 用于展示基础框架结构,如appBar、body、bottomNavigationBar
home: Scaffold(
// AppBar:相当于iOS 的导航栏
appBar: AppBar(
// AppBar上的显示内容
// Text 用于展示文本内容,相当于iOS中的UILabel
title: Text('App Bar 展示内容'),
),
// body:AppBar及BottomNavigationBar之间展示的内容
// Center 是用于把子Widget 居中的Widget
body: Center(
child: Text('Hello World'),
),
// 相当于iOS 中的UITabBar
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(icon: Icon(Icons.work), title: Text('工作')),
BottomNavigationBarItem(
icon: Icon(Icons.security), title: Text('安全')),
],
onTap: (tappedIndex) {
print('tappedIndex:$tappedIndex');
},
),
),
);
}
}

上述代码整体效果图如下

用Flutter 写一个简单页面

下述代码中title传入的值的作用为:在安卓手机上显示出来任务管理器的时候,显示为任务名。

runApp(MaterialApp(
title: '安卓切换任务管理时任务名',
home: QiStatelessApp(),
));

示意图如下:

用Flutter 写一个简单页面

另外 MaterialApp 控制界面风格为安卓风格,CupertinoApp界面风格为iOS 风格

Flutter简单页面效果

在本文中,笔者将会做一个如下效果的Flutter 页面。

用Flutter 写一个简单页面

上述页面相关Widget先容

下边笔者依次先容上述页面用到的Widget。

(1) Text

Text('Hello World'),

Text 用于展示文字内容。

(2) Image

Image.network(
'https://upload.jianshu.io/collections/images/1673367/8.png?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240')

Image 用于展示网络图片

(3) FlatButton

FlatButton(
child: Text(
'FlatButton',
style: TextStyle(
backgroundColor: Colors.yellow,
),
),
onPressed: () {
print('press FlatButton');
setState(() {
_centerString = 'Change Self';
});
},
),

FlatButton 可以显示内容也可以接受交互。

(4) GestureDetector

 GestureDetector(
child: Text(
'GestureDetector',
style:
TextStyle(color: Colors.red, backgroundColor: Colors.yellow),
),
onTap: () {
print('GestureDetector');
},
),

GestureDetector 可以达到包裹内容并接受交互的目的

(5)Column

Column(
children: <Widget>[
Text('Hello World'),
Icon(Icons.share),
FlatButton(
child: Text('FlatButton'),
onPressed: (){
print('press FlatButton');
},
),
],
),

Column 用于列排展示 children 内容

(6)ListView

ListView 相当于列表。使用 ListTile 来展示列表内容。

ListView(
children: <Widget>[
ListTile(
title: Text('姓名'),
trailing: Text('FlutterDev'),
),
ListTile(
title: Text('性别'),
trailing: Text('男'),
),
ListTile(
title: Text('地区'),
trailing: Text('河北'),
),
ListTile(
title: Text('手机'),
trailing: Text('176*****9396'),
),
ListTile(
title: Text('其他'),
subtitle: Text('subtile'),
leading: Icon(Icons.security),
trailing: Icon(Icons.share),
onTap: () {
print('ListTile1');
},
),
],
),

(7) ListTile

ListTile 是列表中的条目

// 列表条目
ListTile(
// 标题
title: Text('ListTile1'),
// 子标题
subtitle: Text('subtile1'),
// 标题左侧的Widget
leading: Icon(Icons.security),
// 标题右侧的Widget
trailing: Icon(Icons.share),
onTap: () {
print('ListTile1');
},
),

页面跳转及回传数据

页面跳转并传值可以通过构造方法传值

Navigator.push(context,
MaterialPageRoute(builder: (context) {
return QiListViewPage('iOS Dev');
})).then((onValue) {
print('回传的数据:$onValue');
});

回传数据。

Navigator.pop(context, 'FlutterDev');

相关代码

import 'package:flutter/material.dart';
// 应用程序实行入口
void main(List<String> args) {
// 初始化指定的Widget,并把Widget渲染效果绘制到屏幕上
// MaterialApp 控制界面风格为安卓风格
// CupertinoApp 界面风格为iOS 风格
// runApp(MaterialApp(
// title: '安卓切换任务管理时任务名',
// home: QiStatelessApp(),
// ));
runApp(MaterialApp(
title: '安卓切换任务管理时任务名',
home: QiStatefulApp(),
));
}
// QiStatefulApp 是有状态的Widget
class QiStatefulApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return QiState();
}
}
QiState负责渲染QiStatefulApp要显示的内容
class QiState extends State<QiStatefulApp> {
@override
Widget build(BuildContext context) {
......
);
}
}


我来说两句
您需要登录后才可以评论 登录 | 马上注册
facelist
所有评论(0)
领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注大家

Powered by Discuz! X3.2© 2001-2019 澳门新莆京娱乐网站-澳门新莆京手机网站(欢迎您).( 粤ICP备15117877号 )

XML 地图 | Sitemap 地图