如何在 flutter 中滾動時隱藏應用欄和底部導航欄

Question

我目前正在開發一個同時具有應用欄和底部導航欄的應用程序。 我希望在用戶滾動時隱藏應用欄和底部導航欄。 我有兩個屏幕

1. 導航欄屏幕：這里編寫了底部導航欄和應用欄的代碼，其中 body 是向用戶顯示的 UI。
2. ListView 屏幕：這是包含數據列表的 UI。

我想要這樣的 output：

導航欄：

class MyNavBarr extends StatefulWidget {
  const MyNavBarr({super.key});
  @override
  State<MyNavBarr> createState() => _MyNavBarrState();
}

class _MyNavBarrState extends State<MyNavBarr> {
  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = <Widget>[
    LiistView(),
    LiistView(),
    LiistView(),
    LiistView(),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppBar"),
        centerTitle: true,
      ),
      body: _widgetOptions.elementAt(_selectedIndex),
      bottomNavigationBar: SizedBox(
        height: 65.0,
        child: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(IconlyLight.image),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(IconlyLight.video),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.library_music_outlined),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(IconlyLight.profile),
              label: '',
            ),
          ],
          currentIndex: _selectedIndex,
          showSelectedLabels: true,
          showUnselectedLabels: false,
          selectedFontSize: 0.0,
          type: BottomNavigationBarType.fixed,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

列表顯示：

class LiistView extends StatefulWidget {
  const LiistView({super.key});

  @override
  State<LiistView> createState() => _LiistViewState();
}

class _LiistViewState extends State<LiistView> {

  final controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 80,
        itemBuilder: (context, index){
          return const ListTile(
            title: Text("Abcd"),
          );
        },

      ),
    );
  }
}

Answer 1

您可以使用Hideable庫實現此目的。

創建一個Scroll Controller並將其傳遞給可滾動小部件

final ScrollController scrollController = ScrollController();

ListView(
 controller: scrollController,
 ...
)

用Hideable包裹你的BottomNavigationBar

Hidable(
 controller: scrollController,
 wOpacity: true, // default
 child: BottomNavigationBar(...),
)

Answer 2

最簡單的方法是，

ScrollController _hideButtonController;

  bool _isVisible = true;
  @override
  void initState() {
    super.initState();
    _isVisible = true;
    _hideButtonController = new ScrollController();
    _hideButtonController.addListener(() {
      print("listener");
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.reverse) {
        setState(() {
          _isVisible = false;
          print("**** $_isVisible up");
        });
      }
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.forward) {
        setState(() {
          _isVisible = true;
          print("**** $_isVisible down");
        });
      }
    });
  }

用與下面相同的動畫容器包裹底部導航欄

AnimatedContainer(
        duration: Duration(milliseconds: 200),
        height: _isVisible ? 60 : 0.0,
        child: BottomNavBarCode......,
      ),

構建您的列表視圖和應用欄，如下所示

CustomScrollView(
        controller: _hideButtonController,
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 150,
            pinned: true, // กำหนดว่าจะให้ pin appbar ไว้บางส่วนไหม หรือ ให้หายไปหมด
            floating: true,
            snap: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text(widget._grassroot.name),
              // title: Text('GRASSROOT ENGINEER'),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              //YOUR_LIST_VIEW_CODE,
              childCount: exercises.length),
          ),
        ],
      ),
    )

Answer 3

您可以向 scrollController 添加一個偵聽器。 然后根據用戶滾動輸入更新 UI。

試試下面這樣的東西。

  ScrollController scrollController = ScrollController();

 @override
  void initState() {
    super.initState();
    scrollController.addListener(_updateScrollController);
  }



 void _updateScrollController() async {
    if (!mounted) {
      return;
    }
    if (scrollController.position.pixels < -100) {
      if (!showSearchbar) {
        HapticFeedback.heavyImpact();
        
        setState(() {

          showSearchbar = true;
        });
      }
    } else if (scrollController.position.pixels > 50) {
      if (showSearchbar) {
        HapticFeedback.heavyImpact();
        setState(() {
          showSearchbar = false;
        });
      }
    }
  }