AmosHuKe/Mood-Example

您好,请问侧边栏怎么调整到左上角?

Closed this issue · 6 comments

您好,请问侧边栏怎么调整到左上角?
我在flutter新手,刚在学习您的这个框架

@zengchanghuan 我也是新手,共同学习哈,
我底部导肮的代码在这里 home_screen
如果要改到左上角你可以找到对应的页面自行在顶部布局,布局相关请看这里 Widget 目录
或者使用 Material 风格的 AppBar、iOS 风格的 CupertinoNavigationBar

请问我使用drawer这种方式后怎么样可以把侧边栏调出来呢?谢谢

return Scaffold(
appBar: AppBar(
title: const Text('trade club'),
),
drawer: SizedBox(
width: MediaQuery.of(context).size.width * 0.9,
child: const Profile(),
),
body: PageView(
controller: _pageViewController,
physics: const NeverScrollableScrollPhysics(),
children: _pages,
),
bottomNavigationBar: DecoratedBox(
decoration: BoxDecoration(
color:
appTheme.bottomNavigationBarTheme.backgroundColor ?? Colors.grey,
boxShadow: [
BoxShadow(color: Colors.black.withOpacity(0.04), blurRadius: 24),
],
),
child: SafeArea(
child: Stack(
// alignment: Alignment.centerLeft,
children: [

          /// 菜单

          TabBar(
            enableFeedback: true,
            padding: EdgeInsets.only(left: 40.w),
            controller: _pageController,
            indicatorColor: Colors.transparent,
            labelStyle: TextStyle(
              height: 0.5.h,
              fontSize: 10.sp,
              fontWeight: FontWeight.bold,
            ),
            unselectedLabelStyle: TextStyle(
              height: 0.5.h,
              fontSize: 10.sp,
              fontWeight: FontWeight.bold,
            ),
            tabs: [
              Tab(
                key: const Key('tab_home'),
                text: S.of(context).app_bottomNavigationBar_title_home,
                icon: Icon(
                  Remix.home_line,
                  size: _tabIconSize,
                ),
              ),
              Tab(
                key: const Key('tab_mood'),
                text: S.of(context).app_bottomNavigationBar_title_mood,
                icon: Icon(
                  Remix.heart_3_line,
                  size: _tabIconSize,
                ),
              ),
              Tab(
                key: const Key('tab_statistic'),
                text: S.of(context).app_bottomNavigationBar_title_statistic,
                icon: Icon(
                  Remix.bar_chart_line,
                  size: _tabIconSize,
                ),
              ),
            ],
            onTap: (value) {
              switch (value) {
                case 2:
                  // 统计菜单触发
                  statistic.init(context);
              }
              _pageViewController.jumpToPage(value);
              setState(() {
                _currentPage = value;
              });
            },
          ),
        ],
      ),
    ),
  ),
);

直接隐藏掉下面的返回按钮一直可以调用侧边栏,大牛厉害

这里有写 NavigationDrawer
给 Scaffold 赋值一个 key

final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

......

Scaffold(
    key: scaffoldKey,
    drawer: ......
)

......

然后通过当前状态打开 Drawer: scaffoldKey.currentState!.openDrawer();

方便留个二维码吗?请您喝杯咖啡

谢谢😄~ 不用不用,记得多多看官方文档 https://flutter.cn/