时间戳

首页 > 解决方案 > flutter -curd_navigation_bar 设置导航页面

android - flutter -curd_navigation_bar 设置导航页面

问题描述

下午好，我是flutter的新手，我正在尝试使用curd_navigation_bar，但我很困惑如何设置页面导航，这是我的代码，索引0将进入news.dart页面，索引1将进入cells.dart页面，index 2会进入home.dart页面，index 3进入book.dart页面，index 4进入info.dart页面，出现的第一页就是index 2，谢谢

    import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:statistik_malang/body.dart';
import 'package:statistik_malang/constants.dart';

class HomeScreen extends StatefulWidget {
  // const HomeScreen({ Key? key }) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(),
      body: Body(),
      extendBody: true,
      bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: Colors.transparent,
        buttonBackgroundColor: kPrimaryColor,
        animationDuration: Duration(milliseconds: 300),
        height: 50,
        items: <Widget>[
          SvgPicture.asset(
            "assets/icons/news.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/cells.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/home.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/book.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/information.svg",
            width: 20.0,
            height: 20.0,
          ),
        ],
        onTap: (index) {},
      ),
    );
  }
}

标签： androidflutterdart

解决方案

只需添加navigationKey并以0开头索引即可解决

编辑：

class _HomeScreenState extends State<HomeScreen> {
  int _page = 0;
  GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(),
      body: Container(
          color: Colors.blueAccent,
          child: Center(
            child: Column(
              children: <Widget>[
                Text(_page.toString(), textScaleFactor: 10.0),
              ],
            ),
          )),
      extendBody: true,
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        backgroundColor: Colors.transparent,
        // buttonBackgroundColor: kPrimaryColor,
        animationDuration: Duration(milliseconds: 300),
        height: 50,
        index: 0,
        items: <Widget>[
         
           SvgPicture.asset(
            "assets/icons/news.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/cells.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/home.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/book.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/information.svg",
            width: 20.0,
            height: 20.0,
          ),
        ],
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
    );
  }
}

推荐阅读