用Flutter 寫一個簡單頁面

級別： ★☆☆☆☆
標(biāo)簽：「Flutter」
作者： WYW
審校： QiShare團隊

前言

本文適用于對Flutter 感興趣的初學(xué)者。筆者會帶大家寫一個簡單頁面，使大家對Flutter有一個簡單地了解。

一、Flutter 簡介

Flutter是Google的UI工具包，可使用一套代碼庫，為移動，Web和桌面構(gòu)建漂亮的原生編譯的應(yīng)用程序。

Flutter實現(xiàn)了一個自繪引擎，使用自身的布局、繪制系統(tǒng)，繪制界面。

1. Flutter 框架架構(gòu)圖

FlutterSystemStructure.png

Flutter框架圖簡單說明：

  • Framework 層使用 Dart 實現(xiàn)，Material 層 包含 Android 風(fēng)格的 Widget ，Cupertino 層 包含 iOS 風(fēng)格的 Widget ，Widgets 層包含 Widget ；Rendering 層包含控制渲染的庫；Animation 層包含動畫的庫；Painting 層包含控制繪制的庫；Gestures 層包含手勢的庫；Foundation層 包含基礎(chǔ)庫（比如確定所屬平臺（Android、iOS等）的API、又如print、debug 相關(guān)的API）。

  • Engine 層使用 C++ 實現(xiàn)，Skia 層是開源的二維圖形庫。Dart層包含 Dart 相關(guān)的API， Text 層包含文字繪制展示相關(guān)的API。

在 Flutter 中我們所看到的內(nèi)容都是由 Widget 控制顯示的，我們所看到的交互效果也是由 Widget 來控制的。在Flutter 中一切都是 Widget。

本文中，筆者會介紹的Widget有 StatelessWidget、 StatefulWidget 、 Text 、 Image 、 FlatButton 、 GestureDetector 、ListView 等。

2. 相關(guān)Widget介紹如下：

  • StatelessWidget 是無狀態(tài)的 Widget ，當(dāng)我們要展示的 Widget 不需要改變顯示內(nèi)容的時候，使用StatelessWidget即可；

  • StatefulWidget 是有狀態(tài)的 Widget ，當(dāng)我們要展示的 Widget 需要改變顯示內(nèi)容的時候，需要使用 StatefulWidget ；StatefulWidget 的子類相當(dāng)于存放了 State 的配置信息。StatefulWidget的界面顯示效果由 State 來控制展示。 當(dāng) StatefulWidget 對應(yīng)的界面數(shù)據(jù)變化后，調(diào)用 setState() 方法，然后系統(tǒng)會運行 buildContext() 就可以做到更新界面的效果。

  • Column 用于展示成 列 排列的 Widget；

  • Container 是一個容器Widget；

  • Text 用于展示文字，相當(dāng)于 iOS 中的 UILabel；

  • Image 用于展示圖片；

  • FlatButton 相當(dāng)于 iOS 中的 UIButton ，用于處理交互事件，同時，F(xiàn)lutter中可以使用GestureDetector 對Widget 進行包裹，也可以達(dá)到具備交互的效果的目的；

  • ListView 相當(dāng)于 iOS 中的 UITableView ，用于展示列表內(nèi)容。

  • ListTile 相當(dāng)于iOS 中的 UITableViewCell。

三、使用Flutter創(chuàng)建一個簡單頁面

1. 頁面顯示Hello World

顯示 Hello World 需要使用 Text Widget

功能代碼如下：

Text('Hello World'),

2. 創(chuàng)建 Flutter 應(yīng)用方式

  • 筆者使用的工具是Visual Studio Code

  • 打開 Visual Studio Code 后，command + shift + p ，然后選擇創(chuàng)建Flutter New Project ，之后輸入小寫字母的項目名即可。

  • 展示Hello World 的相關(guān)代碼如下：

筆者已經(jīng)按照自己的理解，加了部分注釋。

// 應(yīng)用程序執(zhí)行入口
void main(List<String> args) {
  // 初始化指定的Widget，并把Widget渲染效果繪制到屏幕上
  runApp(MaterialApp(
    title: '安卓切換任務(wù)管理時任務(wù)名',
    home: QiStatelessApp(),
  ));
}

// 創(chuàng)建一個繼承自Stateless的Widget
class QiStatelessApp extends StatelessWidget {
  // 重寫build 方法，build 方法返回值為Widget類型，返回內(nèi)容為屏幕上顯示內(nèi)容。
  @override
  Widget build(BuildContext context) {
    // MaterialApp 控制界面風(fēng)格為安卓風(fēng)格
    // CupertinoApp 界面風(fēng)格為iOS 風(fēng)格
    return MaterialApp(
      title: '安卓切換任務(wù)管理時任務(wù)名',
      // debugShowCheckedModeBanner: false,
      // Scaffold：腳手架 用于展示基礎(chǔ)框架結(jié)構(gòu)，如appBar、body、bottomNavigationBar
      home: Scaffold(
        // AppBar：相當(dāng)于iOS 的導(dǎo)航欄
        appBar: AppBar(
          // AppBar上的顯示內(nèi)容
          // Text 用于展示文本內(nèi)容，相當(dāng)于iOS中的UILabel
          title: Text('App Bar 展示內(nèi)容'),
        ),
        // body：AppBar及BottomNavigationBar之間展示的內(nèi)容
        // Center 是用于把子Widget 居中的Widget
        body: Center(
          child: Text('Hello World'),
        ),
        // 相當(dāng)于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傳入的值的作用為：在安卓手機上顯示出來任務(wù)管理器的時候，顯示為任務(wù)名。

runApp(MaterialApp(
    title: '安卓切換任務(wù)管理時任務(wù)名',
    home: QiStatelessApp(),
  ));

示意圖如下：

androidTaskName.png

另外 MaterialApp 控制界面風(fēng)格為安卓風(fēng)格，CupertinoApp 界面風(fēng)格為iOS 風(fēng)格。

三、Flutter簡單頁面效果

在本文中，筆者將會做一個如下效果的Flutter 頁面。

FlutterPage.png

四、上述頁面相關(guān)Widget介紹

下邊筆者依次介紹上述頁面用到的Widget。

(1) Text

Text('Hello World'),

Text 用于展示文字內(nèi)容。

(2) Image

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

Image 用于展示網(wǎng)絡(luò)圖片

(3) FlatButton

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

FlatButton 可以顯示內(nèi)容也可以接受交互。

(4) GestureDetector

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

GestureDetector 可以達(dá)到包裹內(nèi)容并接受交互的目的。

(5)Column

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

Column 用于列排展示 children 內(nèi)容。

(6)ListView

ListView 相當(dāng)于列表。使用 ListTile 來展示列表內(nèi)容。

ListView(
    children: <Widget>[
      ListTile(
        title: Text('姓名'),
        trailing: Text('FlutterDev'),
      ),
      ListTile(
        title: Text('性別'),
        trailing: Text('男'),
      ),
      ListTile(
        title: Text('地區(qū)'),
        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(
  // 標(biāo)題
  title: Text('ListTile1'),
  // 子標(biāo)題
  subtitle: Text('subtile1'),
  // 標(biāo)題左側(cè)的Widget
  leading: Icon(Icons.security),
  // 標(biāo)題右側(cè)的Widget
  trailing: Icon(Icons.share),
  onTap: () {
    print('ListTile1');
  },
),

五、頁面跳轉(zhuǎn)及回傳數(shù)據(jù)

頁面跳轉(zhuǎn)并傳值可以通過構(gòu)造方法傳值。

Navigator.push(context,
    MaterialPageRoute(builder: (context) {
  return QiListViewPage('iOS Dev');
})).then((onValue) {
  print('回傳的數(shù)據(jù)：$onValue');
});

回傳數(shù)據(jù)。

Navigator.pop(context, 'FlutterDev');

六、相關(guān)代碼

import 'package:flutter/material.dart';

// 應(yīng)用程序執(zhí)行入口
void main(List<String> args) {
  // 初始化指定的Widget，并把Widget渲染效果繪制到屏幕上
  // MaterialApp 控制界面風(fēng)格為安卓風(fēng)格
  // CupertinoApp 界面風(fēng)格為iOS 風(fēng)格
  // runApp(MaterialApp(
  //   title: '安卓切換任務(wù)管理時任務(wù)名',
  //   home: QiStatelessApp(),
  // ));

  runApp(MaterialApp(
    title: '安卓切換任務(wù)管理時任務(wù)名',
    home: QiStatefulApp(),
  ));
}

// QiStatefulApp 是有狀態(tài)的Widget
class QiStatefulApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return QiState();
  }
}

QiState負(fù)責(zé)渲染QiStatefulApp要顯示的內(nèi)容
class QiState extends State<QiStatefulApp> {

  @override
  Widget build(BuildContext context) {
    ......
    );
  }
}

更多代碼見Demo：QiFlutterPage

七、參考學(xué)習(xí)資料

推薦文章：
5分鐘，帶你迅速上手Markdown語法
Swift 5.1 (2) - 運算符
Swift 5.1(1) - 基礎(chǔ)
iOS UI狀態(tài)保存和恢復(fù)（三）
iOS UI狀態(tài)保存和恢復(fù)（二）
iOS UI狀態(tài)保存和恢復(fù)（一）
iOS 中精確定時的常用方法
Sign In With Apple（一）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 文章概述 本人之前主要從事iOS開發(fā)工作，剛好Flutter文檔中有一篇Flutter for iOS devel...
    面試小集閱讀 1,109評論 0贊 3
  • Google 出品，Dart語言，F(xiàn)lutter Engine引擎，響應(yīng)式設(shè)計模式，原生渲染。 目錄 1. 什么是...
    蘭朋友_閱讀 4,917評論 0贊 3
  • 原文在此，此處只為學(xué)習(xí) Widget與ElementWidget主要接口Stateless WidgetState...
    lltree閱讀 4,618評論 0贊 1
  • 活動是營銷及運營中的重要一環(huán)，不同于日常內(nèi)容和用戶運營的潤物細(xì)無聲，活動運營更需要引爆性，但這并不意味著策劃活動只...
    媒界平臺閱讀 2,145評論 0贊 0
  • 馬上又要過節(jié)了，距離上次見面都不知道過去多久了，想不起來是一周前還是一個月前，雖然每天有電話和短訊，但是真的快記不...
    貓飯閱讀 204評論 0贊 1

友情鏈接更多精彩內(nèi)容