如何在 Flutter 底部导航栏中的特定选项卡中加载数据

如何解决如何在 Flutter 底部导航栏中的特定选项卡中加载数据

我在底部导航栏中使用动画容器来在滚动时隐藏底部导航栏（类似于 Pinterest）。我想在同一页面中显示特定选项卡的数据。 （参考 GIF）

https://i.stack.imgur.com/xlOsy.gif

我想在选项卡的屏幕中显示内容，我不想路由到离开主屏幕的其他屏幕。我有 4 行不同的图标。我怎样才能做到这一点？

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  double yTransValue = 0;

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollUpdateNotification>(
      onNotification: (notification) {
        print(notification.metrics.axisDirection);
        print(notification.metrics.axis);

        if (notification.scrollDelta.sign == 1) {
          setState(() {
            yTransValue = 100;
          });
        } else if (notification.scrollDelta.sign == -1) {
          setState(() {
            yTransValue = 0;
          });
        }
      },child: Scaffold(
        body: ListView.builder(
          itemBuilder: (BuildContext context,int index) {
            return SizedBox(
              height: 260,child: Card(
                child: Center(child: Text('Item #$index')),),);
          },bottomNavigationBar: AnimatedContainer(
          duration: Duration(milliseconds: 300),transform: Matrix4.translationValues(0,yTransValue,0),child: SizedBox(
            height: 60,child: Card(
              color: Colors.grey,child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
                  Icon(Icons.home),Icon(Icons.search),Icon(Icons.favorite_border),Icon(Icons.person_rounded),],);
  }
}

我曾尝试使用“手势检测器”包装图标，但是当按下图标时，数据会加载到新屏幕中。

解决方法

使用以下代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,home: MyStatefulWidget(),);
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30,fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',style: optionStyle,),Text(
      'Index 1: Business',Text(
      'Index 2: School',];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),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,);
  }
}