跟上時代潮流，一塊兒實踐Flutter開發

時間 2019-11-07

標籤跟上時代潮流一塊兒實踐 flutter 開發简体版

原文原文鏈接

文章概述

上一篇文章咱們初體驗了Flutter，瞭解瞭如何建立項目與熱加載。本文咱們經過完成一個列表的例子來進一步感覺Flutter的使用效果。經過閱讀本文你講了解以下內容：git

如何使用Android Studio開發Flutter應用
如何引入第三方庫
瞭解Flutter項目的主要結構

示例效果以下github

建立項目

打開Android Studio，File->New->New Flutter Project… 選擇 Flutter Application，輸入項目名稱、位置、描述等信息，選擇Next，輸入公司信息，點擊FInish完成。項目打開後咱們主要用以下圖的功能：shell

引入第三方庫

列表項目咱們須要使用第三庫來實現，Flutter的第三方庫依賴放在pubspec.yaml文件中。打開此文件，鍵入以下內容：app

dependencies:
 flutter:
 sdk: flutter

 cupertino_icons: ^0.1.2
 english_words: ^3.1.0

dev_dependencies:
複製代碼

cupertino_icons 是一個字體圖標庫，english_words 是一個生成英文單詞的庫。框架

以後再命令行中執行以下命令less

~/my/flutter/flutter_frist $ flutter packages get
複製代碼

你可能會遇到內容下載不下來的問題，這是牆的緣由，經過修改國內鏡像能夠解決，dom

~/my/flutter/flutter_frist $ export PUB_HOSTED_URL=https://pub.flutter-io.cn
~/my/flutter/flutter_frist $ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製代碼

再次執行 flutter packages get 便可獲取依賴。ide

列表實現

準備好了上面內容，咱們就能夠去寫代碼完成今天的任務了。打開 main.dart ，清空裏面的代碼。輸入以下代碼：字體

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart'; //引入第三方庫頭文件

void main() => runApp(MyApp()); //項目入口

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) { //啓動項目會自動執行build方法。
    return MaterialApp(
      title: "Startup Name Generator",
      home: RandomWord()
    );
  }
}
複製代碼

這段代碼中咱們引入了第三方文件，建立項目入口。ui

StatelessWidget 繼承自 Widget。Widget是Flutter框架中的核心組件，StatelessWidget表示的是一個不可變的Widget。

固然上面代碼還不能執行，咱們須要實現RandomWord。

class RandomWordsStatus extends State<RandomWord> {

  Widget _buildRow(WordPair pair) {
    @override
    Widget build(BuildContext context) {
      return Scaffold (
        appBar: AppBar(  //導航欄
          title: Text('Startup Name Generator'), //標題
          actions: <Widget>[  //按鈕
            IconButton(icon: Icon(Icons.list), onPressed: _pushSaved ,) 
          ],
        ),
        // body: _buildSuggestions(),
      );
    }
  }
}


class RandomWord extends StatefulWidget {
  @override
  RandomWordsStatus createState() => RandomWordsStatus();
}

複製代碼

此時運行項目，你可獲得一個帶有導航條的空白頁。

接下來咱們完成列表

Widget _buildSuggestions() {
    _suggestions.clear();
    _suggestions.addAll(generateWordPairs().take(20)); // 數據源 隨機生成20個單詞
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
        itemCount: _suggestions.length,
      itemBuilder: (context, i) {
        if (i.isOdd) return Divider(); //顯示分割線
        return _buildRow(_suggestions[i]); //顯示文檔
      });
  }

//渲染cell
Widget _buildRow(WordPair pair) {
    final bool alreadySaved = _saved.contains(pair);
    return ListTile (
      title: Text(pair.asPascalCase,
      style: _biggerFont,
      ),
      trailing: Icon(
          alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors
            .red : null,
      ),
      onTap: () {  //點擊事件
        setState( //此方法自動刷新界面。
            (){
              if(alreadySaved) {
                _saved.remove(pair);
              } else {
                _saved.add(pair);
              }
            }
        );
      },
    );
複製代碼

到這一步咱們就能看到一個列表了。

下面咱們實現點擊事件。

void _pushSaved() {
    Navigator.of(context).push( //push下一個頁面
      MaterialPageRoute<void>(
        builder: (BuildContext context) {
          //
          final Iterable<ListTile> tiles = _saved.map(
                  (WordPair pair) {
                return ListTile(
                  title: Text(
                    pair.asPascalCase,
                    style: _biggerFont,
                  ),
                );
              }
          );

          final List<Widget> divided = ListTile
              .divideTiles(
              context: context,
              tiles: tiles
          ).toList();

          return Scaffold(
            appBar: AppBar(title: Text('saved Suggestions'),),
            body: ListView(children: 
                           divided,),
          );
        }
      )
    );
  }
複製代碼