• 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)
    ),
    ],
    ),
    );
    }
    }
  • 相关阅读:
    查找大文件 & 索引节点(inode)爆满 解决办法
    技术领导力 —— 左耳听风 专栏读后感
    左耳朵耗子关于技术变现一文读后感
    html--前端jquery初识
    html--JavaScript之DOM (文档对象模型)
    html--前端JavaScript基本内容
    html--前端javascript初识
    html--前端css常用属性
    html--前端css样式初识
    html--前端基本标签内容讲解
  • 原文地址:https://www.cnblogs.com/zhaofeis/p/12337251.html
Copyright © 2020-2023  润新知