概述

這是一次獨(dú)立嘗試，即獨(dú)立完成實(shí)現(xiàn)Flutter文檔第一個(gè)項(xiàng)目的最終效果，實(shí)現(xiàn)目標(biāo)即首頁為一個(gè)可無限滾動(dòng)的單詞列表，點(diǎn)擊單詞右邊的小心心即可收藏或者取消收藏，可以在右上角的列表頁查看收藏的單詞，自己實(shí)現(xiàn)的效果如下：
首頁：

單詞收藏頁：

實(shí)現(xiàn)思路

看到這樣一個(gè)功能，即可以分為兩個(gè)頁面，第一個(gè)頁面本質(zhì)就是一個(gè)列表頁，每個(gè)列表分為兩部分，即單詞和收藏按鈕，而第二個(gè)頁面只需要顯示單詞，布局簡(jiǎn)單拆解：

接下我們就可以動(dòng)手實(shí)踐了，第一步添加需要用到的單詞包english_words，即在pubspec.yaml 中，將 english_words（3.1.0或更高版本）添加到依賴項(xiàng)列表：

dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 english_words: ^3.1.0

構(gòu)建首頁：

構(gòu)建首頁的appBar，同時(shí)注冊(cè)第二個(gè)頁面的路由和跳轉(zhuǎn)按鈕，以及定制一個(gè)簡(jiǎn)易棕色主題

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(// 去掉右上角的debug標(biāo)識(shí)debugShowCheckedModeBanner: false,title: 'First Flutter',// 為第二個(gè)頁面注冊(cè)路由routes: {'love_page': (context) => LovePage(),},theme: ThemeData(primaryColor: Colors.grey,),home: HomePage(),);} }// 首頁 class HomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text('Words List'),actions: <Widget>[IconButton(// 第二個(gè)頁面跳轉(zhuǎn)按鈕icon: Icon(Icons.list),onPressed: () {Navigator.pushNamed(context, 'love_page');},),],),// 單詞列表頁面body: RandomWords());} }

構(gòu)建單詞列表及樣式制定

構(gòu)建一個(gè)單詞列表，并定制列表單行(Container)的樣式，比如背景white-black漸變效果，單詞(child)字體大小及顏色，單詞和按鈕的布局，比如利用Expanded實(shí)現(xiàn)空白部分的擴(kuò)充，使得“小心心”按鈕靠右，利用ListView實(shí)現(xiàn)一個(gè)無線懶加載的單詞列表等

// 單詞列表頁 class RandomWords extends StatelessWidget {@overrideWidget build(BuildContext context) {return new ListView.builder(itemBuilder: (BuildContext context, int index) {final _wordPair = WordPair.random();// 單個(gè)單詞行的定制，包括一個(gè)單詞和一個(gè)小心心按鈕return Container(padding: EdgeInsets.symmetric(horizontal: 10),decoration: BoxDecoration(// 制作一個(gè)下邊框作為每行的分割線border: Border(bottom: BorderSide(color: Colors.black26, style: BorderStyle.solid)),// 背景顏色漸變gradient:LinearGradient(colors: [Colors.white30, Colors.black12])),height: 40,child: Row(children: <Widget>[Expanded(flex: 5,child: Text('$_wordPair',style: TextStyle(color: Colors.brown, fontSize: 30))),Expanded(flex: 2, child: LoveWords(word: _wordPair)),],));},);} }

收藏'小心心'按鈕實(shí)現(xiàn)

由于收藏點(diǎn)擊小心心是個(gè)狀態(tài)變化的過程，所以該小部件使用StatefulWidget 定義，同時(shí)傳遞一個(gè)全局變量存儲(chǔ)收藏的單詞便于傳遞給第二個(gè)單詞收藏頁面顯示，該按鈕部件實(shí)現(xiàn)點(diǎn)擊小心心時(shí)改變小心心顏色為紅色同時(shí)存儲(chǔ)點(diǎn)擊行的單詞，或者“取消收藏”

// 收藏“小心心”按鈕實(shí)現(xiàn) class LoveWords extends StatefulWidget {LoveWords({Key key, this.word}) : super(key: key);// 怎么獲取當(dāng)列的數(shù)據(jù)final word;@overrideLoveWordsState createState() => new LoveWordsState(); }// 全局變量存儲(chǔ) 喜歡的單詞 列表 var _loveList = <WordPair>[];class LoveWordsState extends State<LoveWords> {var _colors = Colors.brown[170];var _icons = Icons.favorite_border;@overrideWidget build(BuildContext context) {return new IconButton(icon: Icon(_icons, size: 30, color: _colors),onPressed: () {setState(() {var word = widget.word;if (_colors == Colors.brown[170]) {_colors = Colors.red;_icons = Icons.favorite;// 使用widget.word。_loveList.add(word);} else {_colors = Colors.brown[170];_icons = Icons.favorite_border;_loveList.remove(word);}});},);} }

第二個(gè)頁面： 單詞收藏頁面的實(shí)現(xiàn)

即顯示收藏的單詞，這里同樣適用ListView展示收藏的單詞列表，但是提前計(jì)算了收藏單詞的數(shù)量限制了列表的大小，從而防止列表溢出。

// 顯示喜歡的單詞列表 頁面 class LovePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text('Favorite Words')),body: ListView.builder(// 限制列表數(shù)量itemCount: _loveList.length,itemBuilder: (BuildContext context, int index) {return new Container(padding: EdgeInsets.symmetric(horizontal: 10),decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.black26, style: BorderStyle.solid)),gradient: LinearGradient(colors: [Colors.white30, Colors.black12])),height: 40,child: Row(children: <Widget>[Expanded(flex: 5,child: Text(_loveList[index].toString(),style:TextStyle(color: Colors.brown, fontSize: 30))),],));},),);} }

Summary

雖然實(shí)現(xiàn)效果和官網(wǎng)大致相似，但是實(shí)現(xiàn)代碼和思路都大相徑庭，可以看出官網(wǎng)實(shí)現(xiàn)的Demo對(duì)Widgets的利用確實(shí)精湛，值得深入學(xué)習(xí)！
完整代碼：https://github.com/kavener/FlutterWidgets/blob/master/lib/FirstFlutter/MyApp.dart

總結(jié)

以上是生活随笔為你收集整理的combobox 怎么实现对listview的类别查询_Flutter实战之独立实现官网Demo单词收藏Demo的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。