flutter tabbar切换选中,展示对应模块

import 'package:flutter/material.dart';



void main() {

  runApp(MyApp());

}



class MyApp extends StatelessWidget {

  const MyApp({super.key});



  @override

  Widget build(BuildContext context) {

    return const MaterialApp(title: 'contaniner', home: HomePage());

  }

}



class HomePage extends StatefulWidget {

  const HomePage({super.key});



  @override

  State<HomePage> createState() => _HomePageState();

}



class _HomePageState extends State<HomePage> {

  int currentIndex = 0;

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      floatingActionButton: Container(

        width: 60,

        height: 60,

        padding: const EdgeInsets.all(5),

        margin: EdgeInsets.only(top: 15),

        decoration: BoxDecoration(

          color: Colors.white,

          borderRadius: BorderRadius.circular(30),

        ),

        child: FloatingActionButton(

          backgroundColor: currentIndex == 2 ? Colors.red : Colors.blue,

          shape: RoundedRectangleBorder(

            borderRadius: BorderRadius.circular(40), //设置圆角

          ),

          onPressed: () => {setState(() => currentIndex = 2)},

          child: const Icon(Icons.add),

        ),

      ),

      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      bottomNavigationBar: BottomNavigationBar(

        elevation: 80,

        fixedColor: Colors.red,

        backgroundColor: Colors.white,

        type: BottomNavigationBarType.fixed,

        iconSize: 33,

        currentIndex: currentIndex,

        onTap: (index) => setState(() => currentIndex = index),

        items: const [

          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),

          BottomNavigationBarItem(

              icon: Icon(Icons.card_giftcard), label: "购物车"),

          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),

          BottomNavigationBarItem(icon: Icon(Icons.adb_outlined), label: "订单"),

          BottomNavigationBarItem(icon: Icon(Icons.people), label: "个人信息"),

        ],

      ),

      appBar: AppBar(

        title: const Center(child: Text('flutter bar')),

        // leading:  Icon(Icons.menu),

        leading: IconButton(

          onPressed: () => print("我是图标按钮1"),

          icon: Icon(Icons.ac_unit), //设置图标

          color: Colors.red, //设置按钮颜色

          splashColor: Colors.yellow, //设置水波纹

          highlightColor: Colors.purple, //设置高亮的颜色

          tooltip: '我是提示信息', //提示信息

        ),

        actions: const [

          Icon(Icons.settings),

          Icon(Icons.vaccines),

        ],

        backgroundColor: Colors.cyan[800],

        elevation: 0.0,

        centerTitle: true,

      ),

      //带索引的集合循环

      body:

          [HomeWidget(), CardWidget(), SettingWidget()].elementAt(currentIndex),

    );

  }

}



class HomeWidget extends StatelessWidget {

  const HomeWidget({super.key});



  @override

  Widget build(BuildContext context) {

    // return const Text('我是首页数据', style: TextStyle(color: Colors.red));

    return ListView(

        children: List.generate(

      20,

      (index) => ListTile(

        leading: Icon(Icons.access_alarm, size: 30),

        title: Text('测试$index'),

        subtitle: Text('子标题$index'),

        selected: index == 1,

        selectedColor: Colors.green,

        trailing: Icon(Icons.keyboard_arrow_right),

      ),

    ));

  }

}



class CardWidget extends StatelessWidget {

  const CardWidget({super.key});



  @override

  Widget build(BuildContext context) {

    return const Text('我是购物车数据', style: TextStyle(color: Colors.amber));

  }

}



class SettingWidget extends StatelessWidget {

  const SettingWidget({super.key});



  @override

  Widget build(BuildContext context) {

    return const Text('我是设置数据', style: TextStyle(color: Colors.green));

  }

}