颤动中的不同导航栏

Posted

技术标签:

【中文标题】颤动中的不同导航栏【英文标题】:a different navigation bar in flutter 【发布时间】:2021-09-14 20:48:09 【问题描述】:

当我点击我在图片中用红色绘制的地方时,我是否可以打开一个带有图标的页面,比如 Instagram 上的底部导航栏,但我希望我的页面和图片中一样

【问题讨论】:

我想要一个导航栏,当我点击左侧三角形时,它会从屏幕左侧打开 【参考方案1】:

你要做的是:

为您的脚手架添加一个抽屉 为您的小部件添加一个 GlobalKey,您将使用它来打开抽屉 如果您不希望出现 AppBar 菜单按钮,请将其删除 添加一个按钮并将其放置在您的身体中
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  


class MyHomePage extends StatelessWidget 
  final String title;
  //Add GlobalKey which you will use to open the drawer
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  MyHomePage(Key? key, required this.title) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      //Set GlobalKey
      key: _scaffoldKey,
   

      appBar: AppBar(title: Text(title), 
      //This will remove the AppBar menu button
      automaticallyImplyLeading: false,),
      body:
      Center(child: 
      Container(
        width: double.infinity,
        alignment: Alignment.centerLeft,
        child: InkWell(
          //This function will open the Side Menu
          onTap: ()=> _scaffoldKey.currentState?.openDrawer()
          ,
                  child: Icon(
            Icons.menu,
            size: 20,
          ),
        ),
      ),
            ),
      //Add Drawer to your Scaffold
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () 
                Navigator.pop(context);
              ,
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () 
                Navigator.pop(context);
              ,
            ),
          ],
        ),
      ),
    );
  

【讨论】:

不能用三角形代替图标? 最好的方法是导入您希望按钮看起来像的资产“图像”您可以使用自定义油漆绘制一个,但我认为这不是最好的解决方案跨度> 如果这解决了您的问题,请将问题标记为已回答,如果您仍在苦苦挣扎,请询问更多详细信息

以上是关于颤动中的不同导航栏的主要内容,如果未能解决你的问题,请参考以下文章

使用底部应用栏标签导航 - 颤动

使用底部导航栏导航回页面时颤动通过底部导航栏选择的索引

如何将底部导航栏添加到此颤动代码

如何使用颤动的底部导航栏导航到几个新页面?

移动到其他页面时无法保持底部导航栏颤动

使用底部导航栏颤动保存 PageView 内每个页面的状态