有没有可能在flutter中使用移动的设备的底部导航栏和桌面的侧边栏?

pod7payv  于 2023-01-27  发布在  Flutter
关注(0)|答案(2)|浏览(154)

我目前正在开发一个跨平台的应用程序,我想在桌面和平板电脑视图中使用侧边栏导航,但在移动的中使用底部导航栏,因为在手机上使用侧边栏并不方便。我在导航部分遇到了麻烦,至于侧边栏,我可以很容易地使用推()函数。但是对于bottomNavBar,我必须使用onItemTapped函数和索引等。有没有简单的方法可以一起使用它们/在它们之间切换?
这是我的边栏导航:

@override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => page),
        );
      },

这是我尝试做底部导航栏导航的方法:

currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
      body: PageNavigationItem.items.elementAt(_selectedIndex),
    );
  } // build method

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
kuhbmx9i

kuhbmx9i1#

据我所知,除非你“制作自己的底部导航栏”,否则没有办法解决你的问题。
不过我想问一下你是否不想用Drawer widget来代替底部导航栏,因为这是一种保持应用跨平台一致性的方法,遵循flutters的项目指南,并允许你使用push,从某种意义上说,它是一个“侧栏”。
我会做我自己的底部导航栏,如果我觉得我需要它,无论什么,像这样:

import 'package:flutter/material.dart';

class BottomNavigationBarWidget extends StatelessWidget {
  final List<Widget> children;
  final Widget body;
  const BottomNavigationBarWidget({Key? key, required this.children, required this.body}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(child: body),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: children,
        )
      ],
    );
  }
}

在主页面类MyHomePage中使用此扩展无状态控件{ const MyHomePage({Key?key}):超级(键:键);

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter app'),
      ),
      body: BottomNavigationBarWidget(
        body: Center(
          child: Text('Hello world!'),
        ),
        children: [
          Column(children:[Icon(Icons.percent), Text("Test")])
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('Zapp!');
        },
        backgroundColor: Colors.yellow[700],
        child: Icon(
          Icons.bolt,
          color: Colors.black,
        ),
      ),
    );
  }
}

这就是结果

但说真的,使用Drawer widget更容易、更好

zsbz8rwp

zsbz8rwp2#

是的,这是可能的,一旦检查下面的示例代码.

演示其工作原理的视频。https://drive.google.com/file/d/1BxK6qevJOu4qYrmnoTXdIYtqLAVC87ya/view?usp=share_link

这里我们为Title和onTap创建一个模型

class DataModel {
  final String labelName;
  final Function onTap;
  const DataModel({required this.labelName, required this.onTap});
}

这里我们正在创建一个DataModel列表,以便在Title和onTap中使用。

List<DataModel> dataList = [
    DataModel(
        labelName: "First",
        onTap: () {
          print("first");
        }),
    DataModel(
        labelName: "Second",
        onTap: () {
          print("Second");
        }),
    DataModel(
        labelName: "Third",
        onTap: () {
          print("Third");
        }),
    DataModel(
        labelName: "Fourth",
        onTap: () {
          print("Fourth");
        }),
  ];

获取设备的功能是移动的或平板电脑

getDevice() {
    return MediaQuery.of(context).size.width <= 800 ? "Mobile" : "Tablet";
  }

下面是该页面完整代码。

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo Home Page"),
      ),
      drawer: getDevice() == "Tablet"
          ? Drawer(
              child: ListView.builder(
              itemCount: dataList.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(dataList[index].labelName),
                  onTap: () {
                    dataList[index].onTap();
                  },
                );
              },
            ))
          : null,
      bottomNavigationBar: getDevice() == "Mobile"
          ? BottomNavigationBar(
              onTap: (value) {
                dataList[value].onTap();
              },
              // backgroundColor: Colors.black,
              items: dataList.map((e) => BottomNavigationBarItem(backgroundColor: Colors.black, icon: Icon(Icons.add), label: e.labelName)).toList(),
              // items: <BottomNavigationBarItem>[
              //   BottomNavigationBarItem(label: "Test", icon: Icon(Icons.add)),
              //   BottomNavigationBarItem(label: "Test1", icon: Icon(Icons.add)),
              //   BottomNavigationBarItem(label: "Test2", icon: Icon(Icons.add)),
              //   BottomNavigationBarItem(label: "Test3", icon: Icon(Icons.add)),
              // ],
            )
          : null,
      body: Center(
        child: TextButton(
            onPressed: () {
              setState(() {
                // isHide = !isHide;
              });
            },
            child: Text("Hide")),
      ),
    );
  }

我希望这些东西能解决你的问题

相关问题