概述

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

單詞收藏頁：

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

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

接下我們就可以動手實(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，同時注冊第二個頁面的路由和跳轉(zhuǎn)按鈕，以及定制一個簡易棕色主題

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(// 去掉右上角的debug標(biāo)識debugShowCheckedModeBanner: false,title: 'First Flutter',// 為第二個頁面注冊路由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(// 第二個頁面跳轉(zhuǎn)按鈕icon: Icon(Icons.list),onPressed: () {Navigator.pushNamed(context, 'love_page');},),],),// 單詞列表頁面body: RandomWords());} }

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

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

// 單詞列表頁 class RandomWords extends StatelessWidget {@overrideWidget build(BuildContext context) {return new ListView.builder(itemBuilder: (BuildContext context, int index) {final _wordPair = WordPair.random();// 單個單詞行的定制，包括一個單詞和一個小心心按鈕return 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('$_wordPair',style: TextStyle(color: Colors.brown, fontSize: 30))),Expanded(flex: 2, child: LoveWords(word: _wordPair)),],));},);} }

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

由于收藏點(diǎn)擊小心心是個狀態(tài)變化的過程，所以該小部件使用StatefulWidget 定義，同時傳遞一個全局變量存儲收藏的單詞便于傳遞給第二個單詞收藏頁面顯示，該按鈕部件實(shí)現(xiàn)點(diǎn)擊小心心時改變小心心顏色為紅色同時存儲點(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(); }// 全局變量存儲 喜歡的單詞 列表 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);}});},);} }

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

即顯示收藏的單詞，這里同樣適用ListView展示收藏的單詞列表，但是提前計算了收藏單詞的數(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對Widgets的利用確實(shí)精湛，值得深入學(xué)習(xí)！
完整代碼：https://github.com/kavener/FlutterWidgets/blob/master/lib/FirstFlutter/MyApp.dart

總結(jié)

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

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