flutter模仿微信读书卡片滑动和tab点击联动简单实现

作者: xq9527 | 来源:发表于2020-02-17 14:08 被阅读0次

flutter模仿微信读书卡片滑动和tab点击联动简单实现
Flutter 自定TabBarView
仿饿了么商品列表页（tableView联动）
手动实现 Swiper 视窗滑动效果
Android之多种多样的App主界面TAB实现方法
微信小程序实现滑动/点击切换Tab
使用ViewPager和Fragment同时实现点击底部Tab切
Flutter 模仿微信读书实现案例
微信小程序顶部滑动tab切换页面
鸿蒙第7课滑动组件、tab组件、滑动页面和文字双向绑定（1）

前言:

相信大家都用过微信读书 APP ，里面有卡片滑动和tab点击联动的效果不过微信读书APP都是原生的Android iOS分别实现的网上也有各种原生的实现的案例，我这里就不展开讲了今天主要给大家分享flutter的实现废话不多说我们正式开始

效果图:

微信截图_20200208221710.png

具体实现:

main.dart 里面我们设置 home: TabNavigator() home加载TabNavigator

import 'package:flutter/material.dart';
import 'tab_navigator.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: TabNavigator()
    );
  }
}

我们具体看TabNavigatorl里面的实现

import 'package:flutter/material.dart';
import 'content_pager.dart';


/**
 * 创建人：xuqing
 * 创建时间：2020年2月7日16:26:18
 *
 */
class TabNavigator extends StatefulWidget {
  TabNavigator({Key key}) : super(key: key);
  @override
  _TabNavigatorState createState() {
    return _TabNavigatorState();
  }
}
class _TabNavigatorState extends State<TabNavigator> {
  final _defaultColor=Colors.grey;  //未选中
  final _activeColor=Colors.blue;  //选中的颜色
  int  _currentIndex=0;
  final ContentPagerConteroller _contentPagerConteroller=new ContentPagerConteroller();
  @override
  void initState() {
   super.initState();
}
  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
             Color(0xffedeef0),
             Color(0xffe6e7E9),
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter
          )
        ),
        child: ContentPager(
          contentPagerConteroller: _contentPagerConteroller,
          onPageChanged: (int index){
            setState(() {
              _currentIndex=index;
            });
          },
        )

      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          _bottomItem("本周", Icons.folder, 0),
          _bottomItem("分享", Icons.explore, 1),
          _bottomItem("免费", Icons.donut_small, 2),
          _bottomItem("长按", Icons.person, 3),
        ],
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        onTap: (index){
          _contentPagerConteroller.jumpTopage(index);
          setState(() {
            _currentIndex=index;
          });
        },
      ),
    );
  }
  //封装底部的tab
   _bottomItem(String title, IconData icon ,int index){
      return BottomNavigationBarItem(
        icon: Icon(
          icon,
          color: _defaultColor,
        ),
        activeIcon: Icon(
          icon,
          color: _activeColor,
        ),
       title: Text(title,style:TextStyle(
         color:_currentIndex!=index?_defaultColor:_activeColor
       ) ,)
      );
   }

}

TabNavigator 里面我们通过 Decoration 设置背景渐变颜色
然后通过 bottomNavigationBar 设置底部的tab导航切换的效果

  bottomNavigationBar: BottomNavigationBar(
        items: [
          _bottomItem("本周", Icons.folder, 0),
          _bottomItem("分享", Icons.explore, 1),
          _bottomItem("免费", Icons.donut_small, 2),
          _bottomItem("长按", Icons.person, 3),
        ],
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        onTap: (index){
          _contentPagerConteroller.jumpTopage(index);
          setState(() {
            _currentIndex=index;
          });
        },
      ),

封装底部的tab

//封装底部的tab
   _bottomItem(String title, IconData icon ,int index){
      return BottomNavigationBarItem(
        icon: Icon(
          icon,
          color: _defaultColor,
        ),
        activeIcon: Icon(
          icon,
          color: _activeColor,
        ),
       title: Text(title,style:TextStyle(
         color:_currentIndex!=index?_defaultColor:_activeColor
       ) ,)
      );

   }

到此我们的底部tab导航我们就实现了
接下来我们实现卡片切换的效果
我们在body里面加载了 ContentPager

  body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
             Color(0xffedeef0),
             Color(0xffe6e7E9),
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter
          )
        ),
        child: ContentPager(
          contentPagerConteroller: _contentPagerConteroller,
          onPageChanged: (int index){
            setState(() {
              _currentIndex=index;
            });
          },
        )
      ),

在 ContentPager 类里面放置一个 PageView来装载所有的滑动的 Widget

Column(
      children: <Widget>[
        Expanded(
          child: PageView(
            onPageChanged: widget.onPageChanged,
            controller: _pageController,
            children: <Widget>[
              _wrapItem(0),
              _wrapItem(1),
              _wrapItem(2),
              _wrapItem(3),
            ],
          ),
        )
      ],
    );

封装 _wrapItem 方法根据下标index来返回对应的Widget

  Widget   _wrapItem(int index){
    return   Container(
      child: _listwidget[index],
    );
  }

定义一个 List<Widget>_listwidget 集合来装载具体的Widget

  static  List<Widget>_listwidget=[
    ThisWeekPage(),
    SharePage(),
    FreeofChargePage(),
    LongpressPage(),
  ];

定义两个成员变量 onPageChanged contentPagerConteroller 用来回调
给 TabNavigator

  final ValueChanged<int>onPageChanged;
  final ContentPagerConteroller contentPagerConteroller;

onPageChanged 用来控制滑动跟tab联动
contentPagerConteroller 用来控制点击底部的tab上的卡片Widget 切换
具体调用
onPageChanged 调用

child: ContentPager(
          contentPagerConteroller: _contentPagerConteroller,
          onPageChanged: (int index){
            setState(() {
              _currentIndex=index;
            });
          },
        )

_contentPagerConteroller 调用

    type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        onTap: (index){
          _contentPagerConteroller.jumpTopage(index);
          setState(() {
            _currentIndex=index;
          });
        },

完整代码实现

import 'package:flutter/material.dart';
import 'pages/thisweek_page.dart';
import 'pages/share_page.dart';
import 'pages/freeofcharge_page.dart';
import 'pages/longpress_page.dart';



/***
 *
 *  创建人:xuqing
 *  创建时间：2020年2月8日23:35:18
 *  类说明: 卡片页面
 *
 *
 *
 */

class ContentPager extends StatefulWidget {
  final ValueChanged<int>onPageChanged;
  final ContentPagerConteroller contentPagerConteroller;


   //构造方法 可选参数
  ContentPager({Key key, this.onPageChanged, this.contentPagerConteroller}) : super(key: key);
  @override
  _ContentPagerState createState() {
    return _ContentPagerState();
  }
}
class _ContentPagerState extends State<ContentPager> {
    //视图比例
  PageController _pageController=PageController(
    viewportFraction: 0.8,
  );
  static List<Color>_colorlist=[
    Colors.blue,
    Colors.red,
    Colors.deepOrange,
    Colors.teal,
  ];


  static  List<Widget>_listwidget=[
    ThisWeekPage(),
    SharePage(),
    FreeofChargePage(),
    LongpressPage(),
  ];




  @override
  void initState() {
    // TODO: implement initState
    if(widget.contentPagerConteroller!=null){
      widget.contentPagerConteroller._pageController=_pageController;
    }
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Expanded(
          child: PageView(
            onPageChanged: widget.onPageChanged,
            controller: _pageController,
            children: <Widget>[
              _wrapItem(0),
              _wrapItem(1),
              _wrapItem(2),
              _wrapItem(3),
            ],
          ),
        )
      ],
    );
  }
  Widget   _wrapItem(int index){
    return   Container(
      child: _listwidget[index],
    );
  }
}
class  ContentPagerConteroller{
  PageController _pageController;
  void  jumpTopage(int page){
    //dart 编程技巧 安全调用
    _pageController?.jumpToPage(page);
  }

}

具体的

   ThisWeekPage(),
    SharePage(),
    FreeofChargePage(),
    LongpressPage(),

这些切换的 Widget我这边就没有做过多的处理只是的设置了一个背景颜色和一个Text 用来测试实现效果有需要拓展的同学可以跟距源代码具体的实现
源码下载链接:https://gitee.com/qiuyu123/tabandpageview.git

最后总结：

这个效果主要是通过 bottomNavigationBar 配合PageView 来实现卡片的页面的滑动切换和底部tab点击切换然后通过回调方法来操作调用的联动
我也是一个flutter 学习的新手希望我总结的文章和代码能帮助到各位同学

flutter模仿微信读书卡片滑动和tab点击联动简单实现
前言: 相信大家都用过微信读书 APP ，里面有卡片滑动和tab点击联动的效果不过微信读书APP都是原生的An...
Flutter 自定TabBarView
实现Tab标签点击和tab内容联动，调用简单。效果图： tab_bar_page_view.dart 调用方式：
仿饿了么商品列表页（tableView联动）
这个功能的关键点是在于左侧tab点击可以联动到右侧的section下面，以及上下滑动右侧tab可以联动到左侧的分区...
手动实现 Swiper 视窗滑动效果
需求说明：在微信小程序中，手动实现 Swiper 组件的Tab切换、滑动效果，当点击的字母大于当前字母时，要求向左...
Android之多种多样的App主界面TAB实现方法
多种多样的App主界面TAB实现方法 (1)ViewPager实现点击Tab切换和手势滑动切换(2)Fragmen...
微信小程序实现滑动/点击切换Tab
背景 ? swiper+scroll-view实现滑动/点击切换Tab，以及scroll-left的使用~ ?文末...
使用ViewPager和Fragment同时实现点击底部Tab切
使用ViewPager和Fragment实现页面切换，点击Tab切换Fragment，手势滑动切换Fragment...
Flutter 模仿微信读书实现案例
前言：各位同学大家好，有一段时间没有给大家更新博客了，最近使用flutter跨平台写了一个模仿微信读书app d...
微信小程序顶部滑动tab切换页面
微信小程序顶部tab导航，可以点击跳转相应的页面，左右滑动切换效果 1、tab标题总共8个，所以一屏无法全部显示，...
鸿蒙第7课滑动组件、tab组件、滑动页面和文字双向绑定（1）
1.滑动组件Scrollview按钮之间的相互链接 2.tab组件Tab和页面联动的写法代码 // 通过id获取...