flutter Listview、 跳轉(zhuǎn)(二)

運(yùn)行編寫了一個(gè)listview代碼簡(jiǎn)易的很(對(duì)著練),繼承StatefulWidget(動(dòng)態(tài)變化)方法

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) {
        return new MaterialApp (
            title : 'Welcome',
            home : new RandomWords(),
        );
    }
}

class RandomWords extends StatefulWidget {
    @override
    createState() => new RandomWordsState();
}

class RandomWordsState extends State <RandomWords> {
    @override
    final _suggestions = <WordPair>[];
    final _saved = new Set<WordPair>();
    final _biggerFont = const TextStyle(fontSize : 18.0);
    Widget build(BuildContext context) {
        return new Scaffold(
            appBar: new AppBar(title: new Text('ListView')),
            body: _buildSuggestions(),
            );
    }
    Widget _buildSuggestions() {
        return new ListView.builder(
            padding : const EdgeInsets.all(16.0),
            itemBuilder : (context, i){
                if (i.isOdd) return new Divider();

                final index = i ~/ 2;
                if (index >= _suggestions.length) {
                    _suggestions.addAll(generateWordPairs().take(10));
                }
                return _buildRow(_suggestions[index]);
            }
        );
    }
    Widget _buildRow(WordPair pair) {
        final alreadySaved = _saved.contains(pair);
        return new ListTile(
            title : new Text(
                pair.asPascalCase,
                style: _biggerFont,
            ),
            trailing: new Icon(
                alreadySaved ? Icons.favorite : Icons.favorite_border,
                color: alreadySaved ? Colors.red : null,
            ),
            onTap: (){
                setState((){
                    if (alreadySaved) {
                        _saved.remove(pair);
                    } else {
                        _saved.add(pair);
                    }
                });
            },
        );
    }
}

跳轉(zhuǎn)頁(yè)面是經(jīng)過(guò)路由進(jìn)行跳轉(zhuǎn):

 點(diǎn)擊事件  onPressed
跳轉(zhuǎn):Navigator.of(context).push();

跳轉(zhuǎn)代碼 替換build:

@override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar:  AppBar(
        title: const Text('Startup Name Generator'),
        actions: <Widget>[
           IconButton(icon: const Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }

_pushSaved方法:

void _pushSaved() {
    Navigator.of(context).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: const Text('Saved Suggestions'),
            ),
            body:  ListView(children: divided),
          );
        },
      ),
    );
  }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容