Question

扑朔迷离的初学者需要知道我在应用程序中使用curved_navigation_bar的一件事。它的工作也导航分页。但是问题是我需要在所有页面上显示导航栏。另外，我需要中间图标在导航中处于活动状态，现在显示第一个图标。有什么办法吗？

这是我的代码

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:mytravel/screens/newsFeedPage.dart';
import 'package:mytravel/screens/loginPage.dart';
import 'package:mytravel/screens/guidePlacePage.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: CurvedNavigationBar(
        items: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => GuidePlacePage()));
            },
          ),
          IconButton(
            icon: Icon(Icons.list),
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => newsFeedPage()));
            },
          ),
          IconButton(
            icon: Icon(Icons.compare_arrows),
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => LoginPage()));
            },
          ),
        ],
      ),
    );
  }
}

Answer 1

尝试一下，让我知道这是否是您想要的。

class _MyHomePageState extends State<MyHomePage> {
  PageController _pageController;
  var selectedPage;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: 0);
    selectedPage = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('widget.title'),
      ),
      body: PageView(
        physics: NeverScrollableScrollPhysics(),
        controller: _pageController,
        children: <Widget>[
          Center(
            child: Container(
              child:  //first screen,
                ),
          ),
          Center(
            child: Container(
              child: //second screen
            ),
          ),
          Center(
            child: Container(
              child: //third screen,
            ),
          ),

          //You have to define all screens here
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                _pageController.jumpToPage(0);
                setState(() {
                  selectedPage = 0;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.list),
              onPressed: () {
                _pageController.jumpToPage(1);
                setState(() {
                  selectedPage = 1;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.compare_arrows),
              onPressed: () {
                _pageController.jumpToPage(2);
                setState(() {
                  selectedPage = 2;
                });
              },
            ),
          ],
        ),
      ),
    );

颤抖如何在所有页面上显示弯曲的导航栏？

1 个答案: