flutter - 如何在 Flutter 中通过点击图标来切换屏幕？

Question

所以我正在开发一个应用程序，并在导航栏上有图标，并希望当用户按下图标时页面会发生变化，但确实了解如何在 flutter 中做到这一点。这是一个例子，所以我有以下代码:

bottomNavigationBar: CurvedNavigationBar(
        color: Color.fromRGBO(3, 9, 23, 1),
        backgroundColor: Colors.transparent,
        buttonBackgroundColor: Colors.white,
        height: 70.0,
        items: <Widget>[
          Icon(
            Icons.home,
            size: 30.0,
            color: Colors.blueAccent,
          ),
          Icon(
            Icons.chat_bubble,
            size: 30.0,
            color: Colors.blueAccent,
          ),
          Icon(
            FontAwesomeIcons.heart,
            size: 30.0,
            color: Colors.blueAccent,
          ),
          Icon(
            Icons.school,
            size: 30.0,
            color: Colors.blueAccent,
          ),
          Icon(
            Icons.show_chart,
            size: 30.0,
            color: Colors.blueAccent,
          ),
        ],
      ),

当按下 Icon() 时，我希望用户转到特定页面。

Answer 1

您可以复制粘贴运行下面的完整代码
您可以使用 CurvedNavigationBar 的 onTap 并在 body 中调用 pageChooser

代码片段

  final Page1 page1 = Page1();
  final Page2 page2 = Page2();
  final Page3 page3 = Page3();
  final Page4 page4 = Page4();
  final Page5 page5 = Page5();

  Widget pageChooser(int page) {
    switch (page) {
      case 0:
        return page1;
      case 1:
        return page2;
      case 2:
        return page3;
      case 3:
        return page4;
      case 4:
        return page5;
    }
  }
...
onTap: (index) {
      setState(() {
        _page = index;
      });
    },
  ),
  body: pageChooser(_page),

工作演示

完整代码

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _page = 0;

  final Page1 page1 = Page1();
  final Page2 page2 = Page2();
  final Page3 page3 = Page3();
  final Page4 page4 = Page4();
  final Page5 page5 = Page5();

  @override
  void initState() {
    super.initState();
  }

  Widget pageChooser(int page) {
    switch (page) {
      case 0:
        return page1;
      case 1:
        return page2;
      case 2:
        return page3;
      case 3:
        return page4;
      case 4:
        return page5;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF4F4F4),
      appBar: AppBar(
        title: Text(
          "Home",
        ),
      ),
      bottomNavigationBar: CurvedNavigationBar(
        color: Color.fromRGBO(3, 9, 23, 1),
        backgroundColor: Colors.transparent,
        buttonBackgroundColor: Colors.white,
        height: 70.0,
        items: <Widget>[
          Icon(
            Icons.home,
            size: 30.0,
            color: Colors.blueAccent,
          ),
          Icon(
            Icons.chat_bubble,
            size: 30.0,
            color: Colors.blueAccent,
          ),
          Icon(
            FontAwesomeIcons.heart,
            size: 30.0,
            color: Colors.blueAccent,
          ),
          Icon(
            Icons.school,
            size: 30.0,
            color: Colors.blueAccent,
          ),
          Icon(
            Icons.show_chart,
            size: 30.0,
            color: Colors.blueAccent,
          ),
        ],
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 600),
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
      body: pageChooser(_page),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Page1");
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Page2");
  }
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Page3");
  }
}

class Page4 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Page4");
  }
}

class Page5 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Page5");
  }
}