zoukankan      html  css  js  c++  java
  • tab 切换 和 BottomNavigationBar 自定义 底部导航条

    BottomNavigationBar 组件
       BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold 组件的参数。
     
    BottomNavigationBar 常见的属性
     
    items  List<BottomNavigationBarItem> 底部导航条按钮集合
    iconSize  icon
    currentIndex 默认选中第几个
    onTap 选中变化回调函数
    fixedColor 选中的颜色
    type  BottomNavigationBarType.fixed  BottomNavigationBarType.shifting
     
    案例
     
    案例代码
    main.dart里面
       return MaterialApp(
           home: Home()
        );


    home组件里面
    import 'package:flutter/material.dart';

    import 'home/index.dart';
    import 'home/class.dart';
    import 'home/my.dart';

    class Home extends StatefulWidget{
    Home({Key key});
    _HomeState createState() => _HomeState();
    }

    class _HomeState extends State {
    var _currentIndex = 0;
    var tabs = [Index(), ClassIf(), My()];
    @override
    Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
    appBar: AppBar(
    title: Text('欢迎')
    ),
    body: tabs[_currentIndex],
    bottomNavigationBar: BottomNavigationBar(
    currentIndex: _currentIndex,
    type: BottomNavigationBarType.fixed,
    onTap: (val) {
    setState(() {
    _currentIndex = val;
    });
    },
    items: [
    BottomNavigationBarItem(
    title: Text('首页'),
    icon: Icon(Icons.home)
    ),
    BottomNavigationBarItem(
    title: Text('分类'),
    icon: Icon(Icons.category)
    ),
    BottomNavigationBarItem(
    title: Text('我的'),
    icon: Icon(Icons.my_location)
    ),
    ],
    ),
    );
    }
    }
  • 相关阅读:
    gitlab备份及迁移
    python paramiko 进行文件上传处理
    秒杀场景简介
    nmon--非常棒的LINUX/AIX性能计数器监测和分析工具
    使用wait()与notify()实现线程间协作
    【转】Spring bean处理——回调函数
    ldconfig和ldd用法
    tcpdump 获取http请求url
    clearfix清除浮动
    git push命令
  • 原文地址:https://www.cnblogs.com/zhaofeis/p/12337251.html
Copyright © 2011-2022 走看看