打开应用后 Flutter 底部导航栏默认页面

Question

进入我的应用程序后，如何将 HomePage() 设置为我的默认页面？我的应用设计将 Home Button 放在底部 NavBar 的中间。

Bottom NavBar 很好，效果很好，从中间开始，但是页面总是从 CameraPage() 开始

代码如下所示

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.cyan,
      ),
      home: Home(),
    );
  }
}

这是 Home()

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

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

class _HomeState extends State<Home> {
  PageController _pageController = new PageController();
  List<Widget> _screens = [
    CameraPage(),
    HomePage(),
    InventoryPage(),
  ];

  int _selectedIndex = 0;
  void _onPagedChanged(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _onItemTapped(int selectedIndex) {
    _pageController.jumpToPage(selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff8f5f1),
      bottomNavigationBar: CurvedNavigationBar(
        index: _selectedIndex,
        onTap: _onItemTapped,
        items: <Widget>[
          ImageIcon(
            AssetImage(''),
            size: 30,
          ),
          ImageIcon(
            AssetImage(''),
            size: 30,
          ),
          ImageIcon(
            AssetImage(''),
            size: 30,
          ),
        ],
      ),
      body: PageView(
        controller: _pageController,
        children: _screens,
        onPageChanged: _onPagedChanged,
      ),
    );
  }
}

Answer 1

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

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

class _HomeState extends State<Home> {
  PageController _pageController = new PageController();
  List<Widget> _screens = [
    CameraPage(),
    HomePage(),
    InventoryPage(),
  ];

  int _selectedIndex = 1;
  void _onPagedChanged(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _onItemTapped(int selectedIndex) {
    _pageController.jumpToPage(selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff8f5f1),
      bottomNavigationBar: CurvedNavigationBar(
        index: _selectedIndex,
        onTap: _onItemTapped,
        items: <Widget>[
          ImageIcon(
            AssetImage(''),
            size: 30,
          ),
          ImageIcon(
            AssetImage(''),
            size: 30,
          ),
          ImageIcon(
            AssetImage(''),
            size: 30,
          ),
        ],
      ),
      body: PageView(
        controller: _pageController,
        children: _screens,
        onPageChanged: _onPagedChanged,
      ),
    );
  }
}

Answer 2

好的，我找到了解决方案，因为

int _selectedIndex = 1;

只设置默认导航栏位置而不是页面。

所以我使用 PageController 中的 initialPage 添加 iniState 以将 Home() 设置为我的默认页面

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

Answer 3

在 main.dart 中

    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'PMS',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.deepPurple,
            accentColor: Colors.white,
            fontFamily: 'Raleway',
            textTheme: ThemeData.light().textTheme.copyWith(
                bodyText1: TextStyle(
                  color: Color.fromRGBO(20, 51, 51, 1),
                ),
                bodyText2: TextStyle(
                  color: Color.fromRGBO(20, 51, 51, 1),
                ),
                headline1: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  fontFamily: 'RobotoCondensed',
                )),
            canvasColor: Colors.transparent,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          initialRoute: SplashScreen.splashScreenRoute,
     routes: {
        HomeScreen.HomeScreenRoute: (context) => HomeScreen(),
        SplashScreen.splashScreenRoute: (context) => SplashScreen(),
        RegistrationScreen.registrationScreenRoute: (context) =>
            RegistrationScreen(),
      
      },
    );
  }
}

在闪屏页面中：

class SplashScreen extends StatelessWidget {
  static final splashScreenRoute = "/splash";

Answer 4

改变这个 int _selectedIndex = 0;到 int _selectedIndex = 1; 所以默认情况下它会打开主页

请参考更新后的代码

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.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.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

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

class _HomeState extends State<Home> {
  PageController _pageController = new PageController();
  List<Widget> _screens = [
    CameraPage(),
    HomePage(),
    InventoryPage(),
  ];

  int _selectedIndex = 1;
  void _onPagedChanged(int index) {
   // setState(() {
      _selectedIndex = index;
    //});
  }

  void _onItemTapped(int selectedIndex) {
    // _pageController.jumpToPage(selectedIndex);
    setState(() {
      _selectedIndex = selectedIndex;
      _onPagedChanged(selectedIndex);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xfff8f5f1),
        bottomNavigationBar: CurvedNavigationBar(
          index: _selectedIndex,
          onTap: _onItemTapped,
          items: <Widget>[
            Icon(Icons.camera),
            Icon(Icons.dashboard),
            Icon(Icons.account_box),
          ],
        ),
        body: _screens[_selectedIndex]
        // PageView(
        //   controller: _pageController,
        //   children: _screens,
        //   onPageChanged: _onPagedChanged,
        // ),
        );
  }
}


class CameraPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Camera"),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Home"),
      ),
    );
  }
}

class InventoryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("InventoryPage"),
      ),
    );
  }
}