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('设置'),
    );
  }
}



猜你喜欢

转载自blog.csdn.net/qq_42572245/article/details/106651640
今日推荐