带有页面视图的自定义导航栏 [Flutter]

Posted

技术标签:

【中文标题】带有页面视图的自定义导航栏 [Flutter]【英文标题】:Custom navigation bar with page view [Flutter] 【发布时间】:2021-03-08 20:12:34 【问题描述】:

我正在尝试使用 PageView 在 Flutter 中实现一个自定义的 BottomNavigationBar,以便在同一 Scaffold 中包含有状态小部件的不同页面之间滑动。

虽然我可以点击导航栏并更改页面,但我无法实现页面浏览滑动手势,同时还更改了指示所选页面的 icon_button 的颜色。我能够完美地使用 BottomNavigationBarItem 做到这一点,但我想使用自定义设计。

是否可以将包含不同 Icon_buttons 的 Stack Widget 转换为 BottomNavigationBarItem,以便我们可以使用 onTap 和 currentindex 函数来简化它?出路是什么?

import 'package:app/screens/screens.dart';
import 'package:flutter/material.dart';

class AppBottomNav extends StatefulWidget 
  AppBottomNav(Key key) : super(key: key);

  @override
  _AppBottomNavState createState() => _AppBottomNavState();


class _AppBottomNavState extends State<AppBottomNav> 
  int currentIndex = 0;
  var pages = [HomeScreen(), HistoryScreen(), ScanScreen(),
    BleConnectionScreen(), AccountScreen()];
  var _appPageController = PageController();

  setBottomBarIndex(index) 
    setState(() 
      currentIndex = index;
    );
  

  @override
  Widget build(BuildContext context) 
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.white.withAlpha(100),
      body: PageView(
        scrollDirection: Axis.horizontal,
        children: pages,
        onPageChanged: (index) 
          setState(() 
            currentIndex = index;
          );
        ,
        controller: _appPageController,
      ),
      bottomNavigationBar:
      Stack(
        children: [
          Positioned(
            bottom: 0,
            left: 0,
            child: Container(
              width: size.width,
              height: 80,
              child: Stack(
                overflow: Overflow.visible,
                children: [
                  CustomPaint(
                    size: Size(size.width, 80),
                    painter: BNBCustomPainter(),
                  ),
                  Center(
                    heightFactor: 0.6,
                    child: FloatingActionButton(backgroundColor: Colors.green[700],
                        child: Icon(Icons.search), // Analyze Button
                        elevation: 0.1,
                        onPressed: () ),
                  ),
                  Container(
                    width: size.width,
                    height: 80,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        IconButton(
                          icon: Icon(
                            Icons.home,
                            color: currentIndex == 0 ? Colors.green[700] : Colors.grey.shade400,
                          ),
                          onPressed: () 

                            setBottomBarIndex(0);
                          ,
                          splashColor: Colors.white,
                        ),
                        IconButton(
                            icon: Icon(
                              Icons.history,
                              color: currentIndex == 1 ? Colors.green[700] : Colors.grey.shade400,
                            ),
                            onPressed: () 
                              setBottomBarIndex(1);
                            ),
                        Container(
                          width: size.width * 0.20,
                        ),
                        IconButton(
                            icon: Icon(
                              Icons.bluetooth,
                              color: currentIndex == 2 ? Colors.green[700] : Colors.grey.shade400,
                            ),
                            onPressed: () 
                              setBottomBarIndex(2);
                            ),
                        IconButton(
                            icon: Icon(
                              Icons.account_circle,
                              color: currentIndex == 3 ? Colors.green[700] : Colors.grey.shade400,
                            ),
                            onPressed: () 
                              setBottomBarIndex(3);
                            ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  

  void _onTappedBar(int value) 
    setState(() 
      currentIndex = value;
    );
    _appPageController.jumpToPage(value);
  


class BNBCustomPainter extends CustomPainter 
  @override
  void paint(Canvas canvas, Size size) 
    Paint paint = new Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;

    Path path = Path();
    path.moveTo(0, 20); // Start
    path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.35, 0);
    path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 20);
    path.arcToPoint(Offset(size.width * 0.60, 20), radius: Radius.circular(20.0), clockwise: false);
    path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.65, 0);
    path.quadraticBezierTo(size.width * 0.80, 0, size.width, 20);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.lineTo(0, 20);
    canvas.drawShadow(path, Colors.black, 5, true);
    canvas.drawPath(path, paint);
  

  @override
  bool shouldRepaint(CustomPainter oldDelegate) 
    return false;
  

【问题讨论】:

我不久前做过类似的事情,但如果你想看看的话,这里使用不同的方法是 DartPad:DartPad 【参考方案1】:

您可以在下面复制粘贴运行完整代码 第 1 步:您可以在 bottomNavigationBar 中删除 StackPositioned 并仅使用 Container 第 2 步:setBottomBarIndex 使用 _appPageController.animateToPage

代码sn-p

bottomNavigationBar: Container(
        width: size.width,
        height: 80,
        child: Stack(
          //overflow: Overflow.visible,
          children: [
            CustomPaint(

... 
setBottomBarIndex(index) 
    setState(() 
      currentIndex = index;
    );
    _appPageController.animateToPage(index,
        duration: Duration(milliseconds: 500), curve: Curves.ease);
  

工作演示

完整代码

import 'package:flutter/material.dart';

class AppBottomNav extends StatefulWidget 
  AppBottomNav(Key key) : super(key: key);

  @override
  _AppBottomNavState createState() => _AppBottomNavState();


class _AppBottomNavState extends State<AppBottomNav> 
  int currentIndex = 0;
  var pages = [
    HomeScreen(),
    HistoryScreen(),
    ScanScreen(),
    BleConnectionScreen(),
    AccountScreen()
  ];
  var _appPageController = PageController();

  setBottomBarIndex(index) 
    setState(() 
      currentIndex = index;
    );
    _appPageController.animateToPage(index,
        duration: Duration(milliseconds: 500), curve: Curves.ease);
  

  @override
  Widget build(BuildContext context) 
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.white.withAlpha(100),
      body: PageView(
        scrollDirection: Axis.horizontal,
        children: pages,
        onPageChanged: (index) 
          setState(() 
            currentIndex = index;
          );
        ,
        controller: _appPageController,
      ),
      bottomNavigationBar: Container(
        width: size.width,
        height: 80,
        child: Stack(
          //overflow: Overflow.visible,
          children: [
            CustomPaint(
              size: Size(size.width, 80),
              painter: BNBCustomPainter(),
            ),
            Center(
              heightFactor: 0.6,
              child: FloatingActionButton(
                  backgroundColor: Colors.green[700],
                  child: Icon(Icons.search), // Analyze Button
                  elevation: 0.1,
                  onPressed: () ),
            ),
            Container(
              width: size.width,
              height: 80,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  IconButton(
                    icon: Icon(
                      Icons.home,
                      color: currentIndex == 0
                          ? Colors.green[700]
                          : Colors.grey.shade400,
                    ),
                    onPressed: () 
                      setBottomBarIndex(0);
                    ,
                    splashColor: Colors.white,
                  ),
                  IconButton(
                      icon: Icon(
                        Icons.history,
                        color: currentIndex == 1
                            ? Colors.green[700]
                            : Colors.grey.shade400,
                      ),
                      onPressed: () 
                        setBottomBarIndex(1);
                      ),
                  Container(
                    width: size.width * 0.20,
                  ),
                  IconButton(
                      icon: Icon(
                        Icons.bluetooth,
                        color: currentIndex == 2
                            ? Colors.green[700]
                            : Colors.grey.shade400,
                      ),
                      onPressed: () 
                        setBottomBarIndex(2);
                      ),
                  IconButton(
                      icon: Icon(
                        Icons.account_circle,
                        color: currentIndex == 3
                            ? Colors.green[700]
                            : Colors.grey.shade400,
                      ),
                      onPressed: () 
                        setBottomBarIndex(3);
                      ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  

  void _onTappedBar(int value) 
    setState(() 
      currentIndex = value;
    );
    _appPageController.jumpToPage(value);
  


class BNBCustomPainter extends CustomPainter 
  @override
  void paint(Canvas canvas, Size size) 
    Paint paint = new Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;

    Path path = Path();
    path.moveTo(0, 20); // Start
    path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.35, 0);
    path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 20);
    path.arcToPoint(Offset(size.width * 0.60, 20),
        radius: Radius.circular(20.0), clockwise: false);
    path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.65, 0);
    path.quadraticBezierTo(size.width * 0.80, 0, size.width, 20);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.lineTo(0, 20);
    canvas.drawShadow(path, Colors.black, 5, true);
    canvas.drawPath(path, paint);
  

  @override
  bool shouldRepaint(CustomPainter oldDelegate) 
    return false;
  


void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: AppBottomNav(),
    );
  


class ScanScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Container(
        child: Center(
            child: Text(
      "Scan",
      style: TextStyle(color: Colors.green),
    )));
  


class HistoryScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Center(child: Text("History"));
  


class HomeScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Center(child: Container(color: Colors.blue, child: Text("Home")));
  


class AccountScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Center(child: Text("Account"));
  


class BleConnectionScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Center(child: Text("BleConnection"));
  

【讨论】:

我是 Flutter 的新手,非常感谢您的建议和代码,不知道我们可以用容器替换堆栈和位置。老兄,你摇滚!

以上是关于带有页面视图的自定义导航栏 [Flutter]的主要内容,如果未能解决你的问题,请参考以下文章

带有自定义后退导航按钮的自定义按钮栏

iOS:带有面包屑路径的自定义导航栏?

如何在 swift 中使用自定义导航栏制作三个分页视图

Flutter:带有嵌套导航的底部导航栏和更改选项卡时恢复根页面

Gatsbyjs 中的自定义导航栏

带有自定义 UITextView 单元格的 TableView 将导航栏滚动到屏幕外