用Flutter 写一个简单页面

奇技指南

本文适用于对Flutter 感兴趣的初学者。笔者会带大家写一个简单页面,使大家对Flutter有一个简单地了解。

Flutter 简介

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

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

Flutter 框架架构图

Flutter框架图简单说明:

  • Framework 层使用 Dart 实现, Material 层 包含 Android 风格的 WidgetCupertino 层 包含 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');

},

),

),

);

}

}

上述代码整体效果图如下

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

runApp(MaterialApp(

title: '安卓切换任务管理时任务名',

home: QiStatelessApp(),

));

示意图如下:

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

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) {

......

);

}

}

更多代码见Demo:QiFlutterPage

参考学习资料

  • https://flutter.dev/docs/development/ui/widgets-intr

  • https://book.flutterchina.club/chapter3/flutter_widget_intro.html

相关推荐

最新活动

360技术嘉年华第八季——测试之美

精彩内容都在

360技术嘉年华第八季——测试之美

识别下方 二维码 或点击 阅读原文 ,立即报名

界世的你当不

只做你的肩膀

360官方技术公众号 

技术干货|一手资讯|精彩活动

空·

是新朋友吗?记得先关注我哦~

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章