用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教程