如何与侧边栏共享​​底部导航器?

时间:2021-03-29 15:43:50

标签: flutter dart

我使用过底部导航器。

但我也想使用侧边栏。

侧边栏:

class MainDrawer extends StatelessWidget {
  const MainDrawer({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Container(
        child: Padding(
          padding: EdgeInsets.only(top: 50.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 50.0,
                backgroundImage: NetworkImage(
                  "https://1.bp.blogspot.com/-VqCqBEa3iXc/YGHvtn6-JpI/AAAAAAAAACo/P0dHB90T_2wqrDnsClsYG5f1SP5vAwwHgCLcBGAsYHQ/s59/logo.png",
                ),
              ),
              SizedBox(
                height: 5.0,
              ),
              Text(
                "YongWonGo",
                style: TextStyle(
                  fontSize: 22.0,
                  fontWeight: FontWeight.w800,
                  fontFamily: 'cage',
                ),
              ),
              SizedBox(
                height: 5.0,
              ),
              Text(
                "행정실 055\)541-1173",
                style: TextStyle(
                  fontSize: 16.0,
                  fontWeight: FontWeight.w400,
                  fontFamily: 'cage',
                ),
              ),
            ],
          ),
        ),
      ),
      SizedBox(
        height: 20.0,
      ),
      //Now let's Add the button for the Menu
      //and let's copy that and modify it
      ListTile(
        onTap: () {},
        leading: Icon(
          Icons.home,
          color: kPrimaryColor,
        ),
        title: Text(
          "메인",
          style: TextStyle(fontFamily: 'cage'),
        ),
      ),

      ListTile(
        onTap: () {},
        leading: Icon(
          Icons.notifications_none_rounded,
          color: kPrimaryColor,
        ),
        title: Text(
          "공지사항 및 안내",
          style: TextStyle(fontFamily: 'cage'),
        ),
      ),

      ListTile(
        onTap: () {},
        leading: Icon(
          Icons.chat,
          color: kPrimaryColor,
        ),
        title: Text(
          "동아리방",
          style: TextStyle(fontFamily: 'cage'),
        ),
      ),

      ListTile(
        onTap: () {},
        leading: Icon(
          Icons.masks_rounded,
          color: kPrimaryColor,
        ),
        title: Text(
          "코로나19 현황과 날씨",
          style: TextStyle(fontFamily: 'cage'),
        ),
      ),

      ListTile(
        onTap: () {},
        leading: Icon(
          Icons.supervised_user_circle,
          color: kPrimaryColor,
        ),
        title: Text(
          "개발자",
          style: TextStyle(fontFamily: 'cage'),
        ),
      ),
    ]);
  }
}

底部导航栏:

import 'package:flutter/material.dart';
import 'package:plant_app/constants.dart';
import 'package:plant_app/screens/corona/home/coronascreen.dart';
import 'package:plant_app/screens/etc/etcScreen.dart';
import 'package:plant_app/screens/home/components/gongji.dart';
import 'package:plant_app/screens/news/components/screens/gongjiScreen.dart';
import 'package:plant_app/screens/home/home_screen.dart';

class YongWonGo extends StatefulWidget {
  @override
  _YongWonGoState createState() => _YongWonGoState();
}

class _YongWonGoState extends State<YongWonGo> {
  int _selectedItemIndex = 0;
  final List pages = [
    HomePage(),
    GongjiScreen(),
    MainScreen(),
    CoronaScreen(),
    EtcScreen(),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: kBackgroundColor,
        primaryColor: kPrimaryColor,
        textTheme: Theme.of(context).textTheme.apply(bodyColor: kTextColor),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
          bottomNavigationBar: BottomNavigationBar(
            elevation: 0,
            backgroundColor: Color(0xFFF0F0F0),
            unselectedItemColor: Colors.grey,
            selectedItemColor: Colors.black,
            selectedIconTheme: IconThemeData(color: Colors.blueGrey[600]),
            currentIndex: _selectedItemIndex,
            type: BottomNavigationBarType.fixed,
            onTap: (int index) {
              setState(() {
                _selectedItemIndex = index;
              });
            },
            items: [
              BottomNavigationBarItem(
                title: Text(""),
                icon: Icon(Icons.home),
              ),
              BottomNavigationBarItem(
                title: Text(""),
                icon: Icon(Icons.notifications_none_rounded),
              ),
              BottomNavigationBarItem(
                title: Text(""),
                icon: Icon(Icons.chat),
              ),
              BottomNavigationBarItem(
                title: Text(""),
                icon: Icon(Icons.masks_rounded),
              ),
              BottomNavigationBarItem(
                title: Text(""),
                icon: Icon(Icons.supervised_user_circle),
              ),
            ],
          ),
          body: pages[_selectedItemIndex]),
    );
  }
}

我认为如果我让 onTap 工作,我可以更改底部导航栏的 _selectedItemIndex 以按我想要的方式工作。

似乎几乎所有事情都交给你了,但我经常谷歌搜索并问你问题。谢谢。

附言请使用翻译器理解。我身边没有老师可以提问。

2 个答案:

答案 0 :(得分:0)

可以使用这个:


IconButton(
    tooltip: "Text",
    icon: const Icon(Icons.home),
    onPressed: () {
    Navigator.pushNamed(context, "/routeName");
    },
 ),

答案 1 :(得分:0)

Scaffold(
    AppBar(
        drawer: YourDrawerWidget(),
    )
    bottomModalSheet: YourBottomSheet(),
)