1. 程式人生 > 其它 >Flutter 仿今日頭條頂部tab切換

Flutter 仿今日頭條頂部tab切換

技術標籤: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();
  }
}