用Flutter 寫一個簡單頁面

奇技指南

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

Flutter 簡介

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

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');	
          },	
        ),	
      ),	
    );	
  }	
}

上述代碼整體效果圖如下

下述代碼中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官方技術公眾號

技術干貨|一手資訊|精彩活動

空·

是新朋友嗎？記得先關注我哦～

本文鏈接：https://blog.csdn.net/qihoo_tech/article/details/102512734

智能推薦

用WebMagic框架寫一個簡單的爬蟲

爬取的目標： TARGET_URL:http://blog.csdn.net/ycd500756 抓取得內容包括每條博客的（標題，時間，閱讀次數）分析：步驟： 1.首先寫一個Model類 2.Processer類 3.Pipeline類 4.DAO類(保存數據，這里只是簡單的輸出而已) 4.Test類...

用Python寫一個簡單的爬蟲功能

首頁，我們要爬蟲的網頁是百度圖片的首頁，把首頁顯示的10張圖片地址爬下來，然后下載至本地。在Safari瀏覽器打開地址：http://image.baidu.com，右鍵點擊其中一張圖片，點擊“檢查元素”，我們就可以定位至img標簽，找到屬性class=”img_pic_layer horizontal”，在本頁面搜索匹配img_pic_layer...

用Python寫一個簡單的表白

import turtle import random def love(x,y):#在(x,y)處畫愛心lalala lv=turtle.Turtle() def tree(branchLen,t): if branchLen > 5:#剩余樹枝太少要結束遞歸 if branchLen<20: myWin = turtle.Screen() t = turtle.Turtle() t...

和朋友都灰常懶，不想上下滾動頁面看價格，所以寫了一個爬蟲，用于存儲商品價格。環境：macOS、python3.5 IDE：pycharm 使用的庫：BeautifulSoup、urllib BeautifulSoup：優秀的HTML/XML的解析器安裝方法：pip install即可，語句：pip install beautifulsoup4 注意：python3一定要安裝BeautifulS...

用JAVA寫一個簡單的小游戲

一、本篇將教大家如何用JAVA寫一個簡單的桌球小游戲，實現的效果是一個桌球能指定在球臺內滾動，實現效果如下：二、 1、第一步創建窗口，引用兩個包，后面要繼承它的類 2、然后設置程序的執行入口 3、將窗口加載出來，設置窗口的重畫時間 4 、加載兩張圖片出來，一個是桌球圖片，另一個是球桌圖片。注意要先加載背景圖片然后再加載小球，不然就會被遮住的 5、最后就是讓小球動起來了，設置小球的移動角度，判斷小...

用Flutter 寫一個簡單頁面

智能推薦

猜你喜歡