Flutter 仿今日头条顶部tab切换

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();
  }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值