Question

颤动脚手架显示右侧导航栏，但我想没有正确的导航小部件。如何在颤动中使用支架实现正确的导航栏？

Answer 1

如果您尝试在应用中显示正确的栏/菜单或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;
    });
  }
}

Answer 2

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

希望这可能有助于某人。

Answer 3

vertical_navigation_bar

如何使用？＃

安装

 dependencies:
  vertical_navigation_bar: ^0.0.1

运行Flutter命令

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

如何在颤动中实现正确的导航栏？

3 个答案: