如何在颤振中实现正确的导航栏？答案

【问题标题】：How to implement a right navbar in flutter?如何在颤振中实现正确的导航栏？
【发布时间】：2023-04-02 03:56:01
【问题描述】：

flutter 脚手架显示了一个正确的导航栏，但我想没有正确的导航小部件。如何在 Flutter 中使用脚手架实现右导航栏？

Flutter Scaffold Image

【问题讨论】：

标签： flutter dart navbar

【解决方案1】：

Scaffold 现在有一个从右向左滑动的endDrawer 属性。

希望这可能对某人有所帮助。

【讨论】：

【解决方案2】：

如果您尝试在应用中显示右侧栏/菜单或Drawer，无论它是永久视图还是临时视图。我能够通过从Allign、Container 和Column 小部件构建我自己的自定义小部件来实现这一点，并通过使用setState 根据用户交互显示或隐藏菜单栏，请参阅这个简单的示例。

我的自定义菜单小部件如下所示：

class RightNavigationBar extends StatefulWidget {
  @override
  _RightNavigationBarState createState() => new _RightNavigationBarState();
}

class _RightNavigationBarState extends State<RightNavigationBar> {
  @override
  Widget build(BuildContext context) {
    return new Align(
      alignment: FractionalOffset.centerRight,
      child: new Container(
        child: new Column(
          children: <Widget>[
            new Icon(Icons.navigate_next),
            new Icon(Icons.close),
            new Text ("More items..")
          ],
        ),
        color: Colors.blueGrey,
        height: 700.0,
        width: 200.0,
      ),
    );
  }
}

然后当用户按下菜单icon 时，我的自定义RightNavigationBar 小部件的对象在setState 内部创建：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _myRightBar = null;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          actions: [new IconButton(
              icon: new Icon (Icons.menu), onPressed: _showRightBar)
          ],
          title: new Text("Right Navigation Bar Example"),
        ),
        body: _myRightBar

    );
  }

  _showRightBar() {
    setState(() {
      _myRightBar == null
          ? _myRightBar = new RightNavigationBar()
          : _myRightBar = null;
    });
  }
}

【讨论】：

【解决方案3】：

vertical_navigation_bar

如何使用它？ #

安装

 dependencies:
  vertical_navigation_bar: ^0.0.1

运行颤振命令

flutter pub get

import 'package:flutter/material.dart';
import 'package:vertical_navigation_bar/vertical_navigation_bar.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Abubakr Elghazawy (Software Developer)',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final pageController = PageController(
      initialPage: 0,
      keepPage: true
  );

  final navItems = [
    SideNavigationItem(icon: FontAwesomeIcons.calendarCheck, title: "New task"),
    SideNavigationItem(icon: FontAwesomeIcons.calendarAlt, title: "Personal task"),
    SideNavigationItem(icon: FontAwesomeIcons.fileAlt, title: "Personal document"),
    SideNavigationItem(icon: FontAwesomeIcons.calendar, title: "Company task"),
    SideNavigationItem(icon: FontAwesomeIcons.arrowCircleRight, title: "Options")
  ];
  final initialTab = 0;



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          SideNavigation(
            navItems: this.navItems,
            itemSelected: (index){
              pageController.animateToPage(
                  index,
                  duration: Duration(milliseconds: 300),
                  curve: Curves.linear
              );
            },
            initialIndex: 0,
            actions: <Widget>[

            ],
          ),
          Expanded(
            child: PageView.builder(
              itemCount: 5,
              controller: pageController,
              scrollDirection: Axis.vertical,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (context, index){
                return Container(
                    color: Colors.blueGrey.withOpacity(0.1),
                    child: Center(
                      child: Text("Page " + index.toString()),
                    )
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

更多详情enter link description here

【讨论】：