Question

我正在尝试查看如何实时更改 DefaultTabController 中 BottomNavigationBar 中的项目，但无济于事。

基本上是这些场景：

非管理员标签栏：[屏幕 A 和 B]
管理标签栏：[屏幕 C、D 和 B]

在屏幕 B 中，有一个按钮可以从管理员视图更改为非管理员视图，反之亦然。

提前致谢。

Answer 1

试试这个，它有效。但是，我建议使用 Provider 而不是将 WidgetState 作为参数传递给任何函数或任何 Widget。

List<Widget> nonAdminWidgets(_BottomNavScaffoldState parent) {
  return <Widget>[
    ProfilePage(parent),
    ClothesPage(),
    ColorsPage(),
  ];
}

List<Widget> adminWidgets(_BottomNavScaffoldState parent) {
  return <Widget>[
    ProfilePage(parent),
    IdeasPage(),
  ];
}

int _currentIndex = 0;

bool isAdmin = true;

List<dynamic> nonAdminNavBars = [
  BottomNavigationBarItem(
    title: Text('Profile'),
    icon: Icon(Icons.face_rounded),
  ),
  BottomNavigationBarItem(
    title: Text('Clothes'),
    icon: Icon(Icons.design_services_rounded),
  ),
  BottomNavigationBarItem(
    title: Text('Colors'),
    icon: Icon(Icons.colorize_rounded),
  ),
];

List<dynamic> adminNavBars = [
  BottomNavigationBarItem(
    title: Text('Profile'),
    icon: Icon(Icons.face_rounded),
  ),
  BottomNavigationBarItem(
    title: Text('Ideas'),
    icon: Icon(Icons.lightbulb_outline_rounded),
  ),
];

class BottomNavScaffold extends StatefulWidget {
  @override
  _BottomNavScaffoldState createState() => _BottomNavScaffoldState();
}

class _BottomNavScaffoldState extends State<BottomNavScaffold> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: isAdmin ? adminWidgets(this)[_currentIndex] : nonAdminWidgets(this)[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        backgroundColor: Colors.orangeAccent,
        selectedItemColor: Colors.white,
        onTap: (value) {
          _currentIndex = value;
          setState(() {});
        },
        items: isAdmin ? adminNavBars : nonAdminNavBars,
      ),
    );
  }
}

class ClothesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      child: Padding(
        padding: EdgeInsets.all(10),
        child: Text(
          "Clothes",
        ),
      ),
    );
  }
}

class ColorsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      child: Padding(
        padding: EdgeInsets.all(10),
        child: Text(
          "Colors",
        ),
      ),
    );
  }
}

class IdeasPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      child: Padding(
        padding: EdgeInsets.all(10),
        child: Text(
          "Ideas",
        ),
      ),
    );
  }
}

class ProfilePage extends StatelessWidget {
  _BottomNavScaffoldState parent;

  ProfilePage(this.parent);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        isAdmin = !isAdmin;
        _currentIndex = 0;
        parent.setState(() {});
      },
      child: Text("Change"),
    );
  }
}

Flutter：实时更改底部导航栏项目

1 个答案: