Flutter之底部tab切换

flutter 专栏收录该内容
7 篇文章 1 订阅

 

效果见上图:(主要是底部的切换实现) 

import 'package:flutter/material.dart';
import 'file:///D:/henanproject/flutter_weight_ui/lib/home/home_tab_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,//去掉debug标签
      theme: ThemeData(
        primarySwatch: Colors.blue,//主题颜色
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeTabPage(),
    );
  }
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_weight_ui/list/article_list_page.dart';
import 'file:///D:/henanproject/flutter_weight_ui/lib/home/banner_page.dart';
import 'package:flutter_weight_ui/setting_page.dart';
import 'package:flutter_weight_ui/tab/top_tab_page.dart';

class HomeTabPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => _homeTabPage();
}
// ignore: camel_case_types
class _homeTabPage extends State<HomeTabPage>{
  final List<BottomNavigationBarItem> list = [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      label: "首页",
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.account_circle),
      label: "文章",
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.security),
      label: "分类",
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.mail),
      label: "消息",
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.menu),
      label: "我的",
    ),
  ];
  int current;
  // 这块可以自己随便写几个page 比如Text("文章")
  final pages = [BannerPage(),ArticlePage(),TabTopPage(),SettingPage(),SettingPage()];

  @override
  void initState() {
    super.initState();
    current =0;//初始化默认展示的page
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: list,//item数组
        currentIndex: current,//当前选中的
        type: BottomNavigationBarType.fixed,//shifting模式目前我是接受不了,传统的用fixed
        onTap: (index) {
          _changPage(index);//动态改变选中的tab
        },
      ),
      body: pages[current],//选中的page
    );
  }
  void _changPage(int index){
    if(index!=current){
      setState(() {//实时改变选中的index,跟微信小程序的setData类似
        current =index;
      });
    }
  }
}

flutter写这种导航的tab还是挺简单的,比原生简单。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值