Flutter 之bottomNavigationBar底部导航使用

0.底部导航属性

1.第一种 简单底部导航

1.在 lib 下创建文件tabs 文件夹，文件加下创建 lists 文件夹 ，在 lists 下创建各个页面，如下图

2.tabs.dart

import 'package:flutter/material.dart';
import 'package:flutter_demo/tabs/lists/cart.dart';
import 'package:flutter_demo/tabs/lists/category.dart';
import 'package:flutter_demo/tabs/lists/home.dart';
import 'package:flutter_demo/tabs/lists/user.dart';

class BottomBarWidget extends StatefulWidget {
  const BottomBarWidget({Key? key}) : super(key: key);

  @override
  State<BottomBarWidget> createState() => _BottomBarWidgetState();
}

class _BottomBarWidgetState extends State<BottomBarWidget> {
  int _current = 0;
  final List _tabs = [
    {
      'url': const HomePage(),
      'label': '首页',
      'bottomLabel': '首页顶部',
      'icon': const Icon(Icons.home),
    },
    {
      'url': const CategoryPage(),
      'label': '分类',
      'bottomLabel': '分类顶部',
      'icon': const Icon(Icons.category),
    },
    {
      'url': const CartPage(),
      'label': '购物车',
      'bottomLabel': '购物车顶部',
      'icon': const Icon(Icons.shopify_sharp),
    },
    {
      'url': const UserPage(),
      'label': '我的',
      'bottomLabel': '我的顶部',
      'icon': const Icon(Icons.person),
    }
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            _tabs[_current]['bottomLabel'],
            style: const TextStyle(color: Colors.green),
          ),
          shadowColor: const Color.fromARGB(255, 255, 255, 255),
          backgroundColor: const Color.fromARGB(235, 231, 231, 231),
        ),
        body: _tabs[_current]['url'],
        bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.green,
            iconSize: 30,
            backgroundColor: const Color.fromARGB(235, 231, 231, 231),
            onTap: (value) {
              setState(() {
                _current = value;
              });
            },
            currentIndex: _current,
            items: _tabs.map((item) {
              return BottomNavigationBarItem(
                icon: item['icon'],
                label: item['label'],
              );
            }).toList()),
      ),
    );
  }
}

3.home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('home...'),
    );
  }
}

4.cart.dart

import 'package:flutter/material.dart';

class CartPage extends StatefulWidget {
  const CartPage({Key? key}) : super(key: key);
  @override
  State<CartPage> createState() => _CartPageState();
}

class _CartPageState extends State<CartPage> {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('cart...'),
    );
  }
}

5.category.dart

import 'package:flutter/material.dart';

class CategoryPage extends StatefulWidget {
  const CategoryPage({Key? key}) : super(key: key);
  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('category...'),
    );
  }
}

6.user.dart

import 'package:flutter/material.dart';

class UserPage extends StatefulWidget {
  const UserPage({Key? key}) : super(key: key);
  @override
  State<UserPage> createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('user...'),
    );
  }
}

7.main.dart

import 'package:flutter/material.dart';

import 'tabs/tabs.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      home: const BottomBarWidget(),
    );
  }
}

// ignore: must_be_immutable

2.复杂底部导航，中间有个大圆形的底部导航；借助的是Scaffold下的floatingActionButton属性来实现；

floatingActionButton: Container(
  margin: const EdgeInsets.only(top: 16), // 调整位置 向上或向下移动
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(60),  // 圆角
    border: Border.all(  // 描边
      color: Colors.white,
      width: 5,
    ),
  ),
  width: 60,
  height: 60,
  child: FloatingActionButton(
    backgroundColor: _current == 2 ? Colors.green : Colors.grey,
    foregroundColor: Colors.white,
    onPressed: () {
      setState(() {
        _current = 2;
      });
    },
    child: const Icon(Icons.add),
  ),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // 按钮显示位置是底部中间