使用Flutter Gallery中的页面替换正文中的图标BottomNavigationBar示例

Question

我正在使用BottomNavigationBar的Flutter Gallery示例。每当我点击图标时，身体部位就会显示图标。我想用FirstTab()，SecondTab()等新页面替换所有这些图标。任何人都可以帮助我将这些页面集成到下面的代码中吗？

码：

import 'package:flutter/material.dart';
import 'package:adminify/tabs/first.dart';
import 'package:adminify/tabs/second.dart';
import 'package:adminify/tabs/third.dart';
import 'package:adminify/tabs/fourth.dart';
import 'package:adminify/tabs/fifth.dart';

class NavigationIconView {
  NavigationIconView({
    Widget icon,
    Widget activeIcon,
    String title,
    Color color,
    TickerProvider vsync,
  }) : _icon = icon,

       _title = title,
       item = BottomNavigationBarItem(
         icon: icon,
         activeIcon: activeIcon,
         title: Text(title),
         backgroundColor: color,
       ),
       controller = AnimationController(
         duration: kThemeAnimationDuration,
         vsync: vsync,
       ) {
    _animation = controller.drive(CurveTween(
      curve: const Interval(0.5, 1.0, curve: Curves.fastOutSlowIn),
    ));
  }

  final Widget _icon;

  final String _title;
  final BottomNavigationBarItem item;
  final AnimationController controller;
  Animation<double> _animation;

  FadeTransition transition(BottomNavigationBarType type, BuildContext context) {
    Color iconColor;
      final ThemeData themeData = Theme.of(context);
      iconColor = themeData.brightness == Brightness.light
          ? themeData.primaryColor
          : themeData.accentColor;


    return FadeTransition(
      opacity: _animation,
      child: SlideTransition(
        position: _animation.drive(
          Tween<Offset>(
            begin: const Offset(0.0, 0.02), // Slightly down.
            end: Offset.zero,
          ),
        ),
        child: IconTheme(
          data: IconThemeData(
            color: iconColor,
            size: 120.0,
          ),
          child: Semantics(
            label: 'Placeholder for $_title tab',
            child: _icon,
          ),
        ),
      ),
    );
  }
}

class BottomNavigationDemo extends StatefulWidget {
  static const String routeName = '/material/bottom_navigation';

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

class _BottomNavigationDemoState extends State<BottomNavigationDemo>
    with TickerProviderStateMixin {
  int _currentIndex = 0;
  BottomNavigationBarType _type = BottomNavigationBarType.fixed;
  List<NavigationIconView> _navigationViews;

  @override
  void initState() {
    super.initState();
    _navigationViews = <NavigationIconView>[
      NavigationIconView(
        icon: const Icon(Icons.home),
        title: 'Home',
        color: Colors.deepPurple,
        vsync: this,
      ),
      NavigationIconView(

        activeIcon: const Icon(Icons.favorite),
        icon: const Icon(Icons.favorite_border),
        title: 'Explore',
        color: Colors.deepOrange,
        vsync: this,
      ),
      NavigationIconView(
        activeIcon: const Icon(Icons.cloud),
        icon: const Icon(Icons.cloud_queue),
        title: 'Cloud',
        color: Colors.teal,
        vsync: this,
      ),
      NavigationIconView(
        activeIcon: const Icon(Icons.favorite),
        icon: const Icon(Icons.favorite_border),
        title: 'Saved',
        color: Colors.indigo,
        vsync: this,
      ),
      NavigationIconView(
        icon: const Icon(Icons.event_available),
        title: 'Profile',
        color: Colors.pink,
        vsync: this,
      )
    ];

    _navigationViews[_currentIndex].controller.value = 1.0;
  }

  @override
  void dispose() {   
    for (NavigationIconView view in _navigationViews)
      view.controller.dispose();
    super.dispose();

  }

  Widget _buildTransitionsStack() {
    final List<FadeTransition> transitions = <FadeTransition>[];

    for (NavigationIconView view in _navigationViews)
      transitions.add(view.transition(_type, context));

    // We want to have the newly animating (fading in) views on top.
    transitions.sort((FadeTransition a, FadeTransition b) {
      final Animation<double> aAnimation = a.opacity;
      final Animation<double> bAnimation = b.opacity;
      final double aValue = aAnimation.value;
      final double bValue = bAnimation.value;
      return aValue.compareTo(bValue);
    });

    return Stack(children: transitions);
  }

  @override
  Widget build(BuildContext context) {
    final BottomNavigationBar botNavBar = BottomNavigationBar(
      items: _navigationViews
          .map<BottomNavigationBarItem>((NavigationIconView navigationView) => navigationView.item)
          .toList(),
      currentIndex: _currentIndex,
      type: _type,
      onTap: (int index) {
        setState(() {
          _navigationViews[_currentIndex].controller.reverse();
          _currentIndex = index;
          _navigationViews[_currentIndex].controller.forward();
        });
      },
    );

    return Scaffold(

      body: Center(
        child: _buildTransitionsStack()
      ),

      bottomNavigationBar: botNavBar,
    );
  }
}

Answer 1

为什么你的代码中有buildTransitionStack？除非你做一些奇怪的事情，否则这可能是不必要的。而且看起来你刚刚开始喋喋不休，所以现在可能值得坚持示例代码，获得你想要的内容，然后担心自定义动画或转换。

如果你看看画廊中的Scrollable Tabs example，你会发现它有一个body: TabBarView。它使用children: _allPages.map<Widget>((_Page page) {并在其中构建一个带有居中图标的卡片。在该示例中，您需要做的就是将要构建卡的部件替换为您要在页面中显示的内容。

如果你需要使用上面的代码，你应该花一些时间来清理它，因为它看起来有点混乱。但要做你想做的事情，首先你需要在NavigationIconView中添加一个Widget page或类似的东西，为NavigationIconview的每个实例（即FirstTab，SecondTab等）定义，然后在你当前有transition的child: IconTheme( .... child: Icon函数中，你会转而进入页面。