欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter 自定义底部导航条及切换

程序员文章站 2024-03-21 11:23:04
...

Flutter 自定义底部导航条及切换

Flutter 自定义底部导航条及切换

未抽离代码

import 'package:flutter/material.dart';
import 'package:untitled1/res/data.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Tab(),
      theme: ThemeData(primarySwatch: Colors.red),
    );
  }
}

class Tab extends StatefulWidget {
  @override
  _TabState createState() => _TabState();
}

class _TabState extends State<Tab> {
  int _currentIndex=0;
  List _list=[
    HomePage(),
    Category(),
    Setting()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text(
            'Title',
            style: TextStyle(color: Colors.amber),
          )),
      body: this._list[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap: (int index){
          setState(() {
            _currentIndex=index;
          });
        },
        iconSize: 40,//icon大小
        fixedColor: Colors.cyan,//选中颜色
        type: BottomNavigationBarType.fixed,//配置底部tabs可以有多个,不会被挤下去
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('主页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text('分类')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')

          ),
        ],
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('分类'),
    );
  }
}


class Category extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('分类'),
    );
  }
}

class Setting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('设置'),
    );
  }
}