【flutter底部导航栏】

最新推荐文章于 2024-03-24 15:37:06 发布

#学习ing

最新推荐文章于 2024-03-24 15:37:06 发布

阅读量275

点赞数

文章标签： flutter android ios

本文链接：https://blog.csdn.net/qq_22894275/article/details/129401957

版权

底部导航样式实现

1、普通底部栏

在这里插入图片描述

1、中间凹起

在这里插入图片描述

3、中间悬浮

在这里插入图片描述

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'application_page.dart';
import 'article_page.dart';
import 'home_page.dart';
import 'mine_page.dart';

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  static final List<Widget> _pagesList = [
    const HomePage(),
    const ApplicationPage(),
    const ArticlePage(),
    const MinePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      // appBar: AppBar(
      //   title: Text(_titles[_currentIndex]),
      // ),
      body: IndexedStack(
        index: _currentIndex,
        children: _pagesList,
      ),
      //1、普通底部栏
      // bottomNavigationBar: BottomNavigationBar(
      //   backgroundColor: Colors.brown,
      //   currentIndex: _currentIndex,
      //   type: BottomNavigationBarType.fixed,
      //   // items: MyTabBar.items,
      //   items: [
      //     BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      //     BottomNavigationBarItem(
      //         icon: Icon(Icons.settings_applications), label: '应用'),
      //     BottomNavigationBarItem(icon: Icon(Icons.article), label: '资讯'),
      //     BottomNavigationBarItem(icon: Icon(Icons.person), label: '个人'),
      //   ],
      //   selectedItemColor: Colors.white,
      //   unselectedItemColor: Colors.grey,
      //   selectedFontSize: 14.sp,
      //   unselectedFontSize: 14.sp,
      //   onTap: (value) {
      //     setState(() {
      //       _currentIndex = value;
      //     });
      //   },
      // ),
      // 底部凸起凹陷导航栏
      bottomNavigationBar: BottomAppBar(
        color: Colors.brown,
        shape: const CircularNotchedRectangle(), //凹陷
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            _buildIconButton(0, Icon(Icons.home, size: 24.r)),
            _buildIconButton(1, Icon(Icons.settings_applications, size: 24.r)),
            SizedBox(
              width: 50.w,
            ),
            _buildIconButton(2, Icon(Icons.article, size: 24.r)),
            _buildIconButton(3, Icon(Icons.person, size: 24.r)),
          ],
        ),
      ),

      ///中间图片凸起
      floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [Icon(Icons.add)])),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  Widget _buildIconButton(int index, Icon icon) {
    return IconButton(
      icon: icon,
      color: _currentIndex == index ? Colors.blue : Colors.grey,
      onPressed: () {
        setState(() {
          _currentIndex = index;
        });
      },
    );
  }
}