flutter - 如何使用底部导航栏在页面之间导航

Question

我试图在页面之间导航，但是无法解决。我没有弄清楚。我试图创建一个 Controller 并放入“BarItem”中，但出现一条消息“只能在初始化程序中访问静态成员”
我正在尝试替换部分:

body: AnimatedContainer(
        color: widget.barItems[selectedBarIndex].color, duration: const Duration(milliseconds: 300),),

单击菜单上的一种更改页面的方法。
帮帮我!

import 'package:flutter/material.dart';

class AnimatedBottomBar extends StatefulWidget {

  final List<BarItem> barItems;
  final Duration animationDuration;
  final Function onBarTap;

  AnimatedBottomBar({this.barItems, this.animationDuration = const Duration(milliseconds: 500), this.onBarTap});

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

class _AnimatedBottomBarState extends State<AnimatedBottomBar> with TickerProviderStateMixin{

  int selectedBarIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Material(
      elevation: 10.0,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: _buildBarItems(),
        ),
      ),
    );
  }
  List<Widget> _buildBarItems() {
    List<Widget> _barItems = List();
    for (int i = 0; i < widget.barItems.length; i++){
      BarItem item = widget.barItems[i];
      bool isSelected = selectedBarIndex == i;
      _barItems.add(InkWell(
        splashColor: Colors.transparent,
        onTap: (){
          setState(() {
            selectedBarIndex = i;
            widget.onBarTap(selectedBarIndex);
          });
        },
        child: AnimatedContainer(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          duration: widget.animationDuration,
          decoration: BoxDecoration(
            color: isSelected ? item.color.withOpacity(0.2) : Colors.transparent,
            borderRadius: BorderRadius.all(Radius.circular(30))
          ),
          child: Row(
            children: <Widget>[
              Icon(item.iconData,
                color: isSelected ? item.color : Colors.black,),
              SizedBox(width: 10.0,),
              AnimatedSize(
                duration: widget.animationDuration,
                curve: Curves.easeInOut,
                vsync: this,
                child: Text(
                  isSelected ? item.text : "",
                  style: TextStyle(color: item.color, fontWeight: FontWeight.w600, fontSize: 18.0),),
              )
            ],
          ),
        ),
      ));
    }
    return _barItems;
  }
}


class BarItem {
  String text;
  IconData iconData;
  Color color;
  PageController controller;//deletar
  int page;//deletar

  BarItem({this.text, this.iconData, this.color, this.controller, this.page});
}

import 'animated_bottom_bar.dart';

class BottomBarNavigationPattern extends StatefulWidget {

  final List<BarItem> barItems = [
    BarItem(
        text: "Home",
        iconData: Icons.home,
        color: Colors.indigo,),
    BarItem(
        text: "Likes",
        iconData: Icons.favorite_border,
        color: Colors.pinkAccent),
    BarItem(
        text: "Search",
        iconData: Icons.search,
        color: Colors.yellow.shade900),
    BarItem(
        text: "Profile",
        iconData: Icons.person_outline,
        color: Colors.teal),
  ];

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

class _BottomBarNavigationPatternState extends State<BottomBarNavigationPattern> {

  int selectedBarIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedContainer(
        color: widget.barItems[selectedBarIndex].color, duration: const Duration(milliseconds: 300),),
      bottomNavigationBar: AnimatedBottomBar(
        barItems: widget.barItems,
        animationDuration: const Duration(milliseconds: 200),
        onBarTap: (index){
          setState(() {
            selectedBarIndex = index;
          });
        }
      ),
      );
  }
}

Answer 1

您只需要添加要导航到示例的小部件列表:

   final List<Widget> _buildScreens = [
    TiersPage(),
    SearchPage(),
    SavedPage(),
  ];

然后将支架的主体更改为_buildScreens[selectedBarIndex]