Flutter 仿今日頭條頂部tab切換
阿新 • • 發佈:2021-01-26
技術標籤:flutter
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_weight_ui/model/subject_data_entity.dart'; import 'package:flutter_weight_ui/model/tab_list_data_entity.dart'; import 'package:flutter_weight_ui/net/RequestUtils.dart'; class TabTopPage extends StatefulWidget{ @override State<StatefulWidget> createState() => _TabTopPage(); } class _TabTopPage extends State<TabTopPage> with TickerProviderStateMixin{//用這個不要用SingleTickerProvider會報錯 List tabs = new List<SubjectDataData>(); int page = 0; int cid = 60; static const myPlugin = const MethodChannel("samples.flutter.io/webview"); TabController _tabController; //需要定義一個Controller PageController _pageController; List<TabListDataDataData> articleList = []; ScrollController _scrollController = ScrollController();//listView的控制器 @override void initState() { _tabController = TabController(initialIndex:0,length: tabs.length,vsync: this); _pageController= PageController(initialPage: 0,keepPage: false,viewportFraction: 1.0); // 建立Controller getSubjectData(); _scrollController.addListener(() { if(_scrollController.position.pixels==_scrollController.position.maxScrollExtent){//如果是最後一個item則觸發,載入新資料 page++; getTabListData(page,cid); } }); super.initState(); } getSubjectData() async { var result = await RequestManager.request("https://www.wanandroid.com/project/tree/json"); setState(() { SubjectDataEntity dataBean = SubjectDataEntity().fromJson(result); tabs.addAll(dataBean.data); _tabController = TabController(initialIndex:0,length: tabs.length,vsync: this); cid = tabs[0].id; getTabListData(page,cid); }); } getTabListData(int page,int id) async{ var data =await RequestManager.request("https://www.wanandroid.com/article/list/$page/json?cid=$id"); print(data); print("id=$id"); setState(() { TabListDataEntity tabListDataEntity = TabListDataEntity().fromJson(data); if(page==0){ articleList.clear(); } articleList.addAll(tabListDataEntity.data.datas); }); } /// 下拉重新整理方法 Future<Null> _onRefresh() async{ page=0; getTabListData(page,cid); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: getTabBar(), ), body:PageView( controller: _pageController, onPageChanged: (index) { _tabController.animateTo(index); //監聽事件 cid = tabs[index].id; page=0; getTabListData(page,cid); }, children: tabs.asMap().keys.map((e) { return getContent(); }).toList() , ), ); } Widget getContent(){ return RefreshIndicator( onRefresh: _onRefresh, child: ListView.builder( physics: AlwaysScrollableScrollPhysics(), itemCount: articleList.length, controller: _scrollController, itemBuilder:(BuildContext context,int index){ return Container( margin:EdgeInsets.all(10.0), decoration: BoxDecoration( color: Colors.white70, border: Border.all(color: Colors.white, width: 1.0), borderRadius: BorderRadius.all(Radius.circular(12.0)) ), child: GestureDetector( onTap: (){ Map<String, String> map = {"url": articleList[index].link}; myPlugin.invokeMethod("setWebViewUrl",map); }, child:ConstrainedBox( constraints: BoxConstraints.tightForFinite(width: double.infinity,height: 120.0), child: Stack( alignment:Alignment.center , //指定未定位或部分定位widget的對齊方式 children: <Widget>[ Positioned( top: 8.0, left: 8.0, child: Text(articleList[index].shareUser==""?articleList[index].author:articleList[index].shareUser), ), Positioned( right: 8.0, top: 8.0, child: Text(articleList[index].niceShareDate), ), Container( padding: EdgeInsets.only(left: 8.0,top: 35.0,right: 8.0), child: Column( children: <Widget>[ Expanded(//Expanded只能在Row Colum中,否則會有異常。如果不加ExpandedText無法實現自動換行 child: Align(//如果不包一層Align,會出現文字換行居中 alignment: Alignment.topLeft, child: Text(articleList[index].title, overflow: TextOverflow.ellipsis, maxLines: 2, style: TextStyle( color: Colors.black, fontWeight: FontWeight.bold, fontSize: 15.0, ), ), ) , ), ], ), ), Positioned( left: 8.0, bottom: 16.0, child: Text(articleList[index].chapterName,style: TextStyle( color: Colors.red ),), ), Positioned( right: 8.0, bottom: 16.0, child: Image( width: 15.0, height: 15.0, image: AssetImage("assets/images/love.png"), ), ), ], ), ) , ), ); }, ), ); } Widget getTabBar(){ return TabBar( onTap: (int index){ _pageController.jumpToPage(index); }, isScrollable: true, controller: _tabController, tabs:tabs.asMap().keys.map((e) => Tab(text:tabs[e].name)).toList(), ); } @override void dispose() { super.dispose(); _scrollController.dispose(); _tabController.dispose(); // 當整個頁面dispose時,記得把控制器也dispose掉,釋放記憶體 _pageController.dispose(); } }