时间戳

首页 > 解决方案 > 如何根据在颤动中单击哪个导航栏按钮来更改脚手架主体？

flutter - 如何根据在颤动中单击哪个导航栏按钮来更改脚手架主体？

问题描述

我是 Flutter 的新手，我想以正确的方式做到这一点，问题是我有一个底部导航栏包 i Curved_navigation_bar它有很棒的外观和动画，这个导航栏应该改变 Scaffold 小部件的主体并显示每次一个新的小部件取决于单击的按钮，我想要实现的是每次单击导航栏的按钮时执行以下操作：

我希望这是在颤振导航中遵循的正确方法（更改屏幕或视图），如果这是错误的，请告诉我

    class _SituationState extends State<ScreenSituation>{
         int _page = 0;
         GlobalKey _bottomNavigationKey = GlobalKey();
         @override
    Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        //if list button is clicked preveiw widget_client
        //if people button is clicked preveiw widget_people
        //if launch button is clicked preveiw launch
      ),
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: 0,
        height: 75.0,
        items: <Widget>[
          Icon(Icons.list, size: 30),
          Icon(Icons.people, size: 30),
          Icon(Icons.launch, size: 30),
        ],
        color: Colors.white,
        buttonBackgroundColor: Colors.white,
        backgroundColor: Colors.blueAccent,
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 300),
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
    );
  }
}

标签： flutterdartflutter-layoutflutter-scaffold

解决方案

获取您的代码示例。

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.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: 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> {
  int _page = 0;
  GlobalKey _bottomNavigationKey = GlobalKey();

  Widget bodyFunction() {
    switch (_page) {
      case 0:
        return Container(color: Colors.red);
        break;
      case 1:
        return Container(color: Colors.blue);
        break;
      case 2:
        return Container(color: Colors.orange);
        break;
      default:
        return Container(color: Colors.white);
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: bodyFunction(),
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: 0,
        height: 75.0,
        items: <Widget>[
          Icon(Icons.list, size: 30),
          Icon(Icons.people, size: 30),
          Icon(Icons.launch, size: 30),
        ],
        color: Colors.white,
        buttonBackgroundColor: Colors.white,
        backgroundColor: Colors.blueAccent,
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 300),
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
    );
  }
}

推荐阅读