如何在 flutter 中点击底部导航栏上的按钮时弹出滑动面板？

Question

gif1: https://drive.google.com/file/d/1ldqHqicHFEauUQbz1fzH5K8XRS3ICNqL/view?usp=sharing gif2: https://drive.google.com/file/d/1NpPVrO9trMbde-rPmbAGeHRVSh28BfPk/view?usp=sharing

我正在制作一个使用地图和底部导航栏以及向上滑动面板的应用程序。我的问题是，就像在第一个 gif 中一样，我想制作底部导航栏和向上滑动面板（或可拖动可滚动 sheet）。当我向下拖动整个面板时，它会消失，当我点击导航栏上的图标时，它会再次出现

但在我制作的第二个 gif 中没有即使向下拖动整个面板它也不会消失。好吧我可以调整面板的最小高度让面板消失但是当我再次点击按钮时没有办法弹出面板

我用过这个包https://pub.dev/packages/sliding_up_panel 我认为这个包中没有我想要的选项（可能是错的！如果我错了请通知我）所以我的问题是有没有flutter包可以实现我上面提到的功能？

Answer 1

试试这个代码，看看对你有没有帮助


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  _State createState() => _State();
}

class _State extends State<HomePage> {
  int _selectedIndex = 0;
  final double _sheetSize = 0.4;
  _onItemTapped(index) {
    setState(() {
      DraggableScrollableActuator.reset(context);
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: SizedBox.expand(
        child: DraggableScrollableSheet(
          key: UniqueKey(),
          initialChildSize: _sheetSize,
          minChildSize: 0.0,
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              color: Colors.blue[100],
              child: ListView.builder(
                controller: scrollController,
                itemCount: 25,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(title: Text('Item $index'));
                },
              ),
            );
          },
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

如何在 flutter 中点击底部导航栏上的按钮时弹出滑动面板？

How to pop up sliding panel when tap a button on a bottom navigation bar in flutter?

android

flutter

mobile-application