用Flutter 写一个简单页面

时间  2020-05-14
标签 flutter 一个 简单 页面 繁體版
原文   原文链接

级别： ★☆☆☆☆
标签：「Flutter」
做者： WYW
审校： QiShare团队php

前言html

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

1、Flutter 简介

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

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

1. Flutter 框架架构图

FlutterSystemStructure.png

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 等。app

2. 相关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。

2、使用Flutter建立一个简单页面

1. 页面显示Hello World

显示 Hello World 须要使用 Text Widget

功能代码以下：

Text('Hello World'),
复制代码

2. 建立 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');
          },
        ),
      ),
    );
  }
}
复制代码

上述代码总体效果图以下：

QiStatelessApp.png
)

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

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

示意图以下：

androidTaskName.png

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

3、Flutter简单页面效果

在本文中，笔者将会作一个以下效果的Flutter 页面。

FlutterPage.png

4、上述页面相关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');
  },
),
复制代码

5、页面跳转及回传数据

页面跳转并传值能够经过构造方法传值。

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

回传数据。

Navigator.pop(context, 'FlutterDev');
复制代码

6、相关代码

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

7、参考学习资料

了解更多iOS及相关新技术，请关注咱们的公众号：

小编微信：可加并拉入《QiShare技术交流群》。

关注咱们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章：
5分钟，带你迅速上手Markdown语法
Swift 5.1 (2) - 运算符
Swift 5.1(1) - 基础
iOS UI状态保存和恢复（三）
iOS UI状态保存和恢复（二）
iOS UI状态保存和恢复（一）
iOS 中精肯定时的经常使用方法
Sign In With Apple（一）
奇舞周刊

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程