Flutter版本玩Android客户端——知识体系tab点击跳转

Posted 2022-04-23 xingfeng_coder

在Flutter版本玩Android(3)——文章详情页中完成了用webview加载文章详情页，本文趁热打铁，完成知识体系tab的跳转逻辑。

和以往一样，先看效果：

体系小item的跳转

文章列表Widget的封装

小item的跳转到一个文章列表，由于发现文章列表和首页可以公用，因此将其抽离出来，完成封装，如下：

class ArticleListWidget extends StatelessWidget 
  final List<ArticleItem> _articleList;

  ArticleListWidget(this._articleList);

  @override
  Widget build(BuildContext context) 
    return SliverList(
        delegate: SliverChildBuilderDelegate((ctx, index) 
      return _creatArticleItem(_articleList[index], context);
    , childCount: _articleList.length));
  

  Widget _creatArticleItem(ArticleItem articleItem, BuildContext context) 
    return SizedBox(
      height: 190.0,
      child: Card(
        child: FlatButton(
            onPressed: () 
              Navigator.of(context).pushNamed(RouteTableConst.ARTICLE_PAGE,
                  arguments: 
                    'url': articleItem.link,
                    'title': articleItem.title
                  );
            ,
            child: Column(
              children: <Widget>[
                ListTile(
                  leading: Text(articleItem.author),
                  trailing: Text(articleItem.niceDate),
                ),
                ListTile(
                  title: Text(
                    articleItem.title,
                    style: TextStyle(color: Colors.black87, fontSize: 20),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                ListTile(
                  leading: ActionChip(
                    label: Text(
                      articleItem.chapterName,
                      style: TextStyle(color: Colors.blue),
                    ),
                    onPressed: () 
                      //TODO 跳转到chapter name
                    ,
                  ),
                  trailing: IconButton(
                    icon: Icon(
                      Icons.favorite,
                      color: articleItem.collect ? Colors.red : Colors.black45,
                    ),
                    onPressed: () ,
                  ),
                ),
              ],
            )),
      ),
    );
  

将首页和知识体系item分别使用该Widget。

知识体系总的跳转

这部分页面有tab+知识体系item widget组成。
代码如下：

class KnowledgeTabWidget extends StatefulWidget 
  @override
  _KnowledgeTabWidgetState createState() => _KnowledgeTabWidgetState();


class _KnowledgeTabWidgetState extends State<KnowledgeTabWidget>
    with TickerProviderStateMixin 
  TabController _tabController;

  KnowledgeCategory _knowledgeCategory;

  List<Tab> _tabs;
  List<Widget> _children;

  @override
  void initState() 
    super.initState();

  

  @override
  void didChangeDependencies() 
    super.didChangeDependencies();
    _knowledgeCategory =
    ModalRoute.of(context).settings.arguments as KnowledgeCategory;

    _tabs=List(_knowledgeCategory.children.length);
    _children=List(_knowledgeCategory.children.length);

    for (int i = 0; i < _knowledgeCategory.children.length; i++) 
      _tabs[i] = Tab(
        child: Text(_knowledgeCategory.children[i].name),
      );
      _children[i] = KnowledgeItemWidget(_knowledgeCategory.children[i],
      );
    
    _tabController = TabController(length: _tabs.length, vsync: this);
  


  @override
  void dispose() 
    _tabController.dispose();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(_knowledgeCategory.name),
        bottom: TabBar(
          tabs: _tabs,
          controller: _tabController,
          isScrollable: true,
        ),
        leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: ()
          Navigator.of(context).pop();
        ),
      ),
      body: TabBarView(
        children: _children,
        controller: _tabController,
      ),
    );
  

可以发现，这种widget的组合确实很easy。

一点感悟：flutter的widget是有state的，可以绑定对象，而ui的编写很多就是组合widget，很简单。

关于代码，可以参考：
https://github.com/wangli135/wan_android/tree/1ba07ff31c163f8d3ad1f24315c9f902fc29116d

关注我的技术公众号，不定期会有技术文章推送，不敢说优质，但至少是我自己的学习心得。微信扫一扫下方二维码即可关注：