• 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)
    ),
    ],
    ),
    );
    }
    }
  • 相关阅读:
    a==null和a.equals("null")的区别
    PHP_EOL换行符
    mysql 重启
    异或的用法
    so easy(并查集+unordered_map)
    牛客练习赛51 C 勾股定理
    Period II
    Simpsons’ Hidden Talents
    POJ-1961 Period
    poj-2406 Power Strings
  • 原文地址:https://www.cnblogs.com/zhaofeis/p/12337251.html
Copyright © 2020-2023  润新知