如何在flutter中创建带有无状态小部件的按钮导航栏? [英] How to create a button navigation bar with a stateless widget in flutter?

问题描述

import 'package:flutter/material.dart';
import 'auth.dart';



// Log Out Button 

class HomePage extends StatelessWidget {
HomePage({this.auth, this.onSignedOut});

final BaseAuth auth;
final VoidCallback onSignedOut;

void _signedOut() async {
 try {
  await auth.signOut();
  onSignedOut();
} catch (e) {
  print(e);
}
}
@override
Widget build(BuildContext context) {
 return new Scaffold(
 appBar: new AppBar(
 title: new Text('Home'),
 actions: <Widget>[
  new FlatButton(
  child: new Text('Logout',
  style: new TextStyle(fontSize: 17.0, color: Colors.lime)),
  onPressed: _signedOut)
 ],
 ),
 );
 }
 }

1. 要添加导航栏，但是要能够更改状态(从一页移动到另一页)，它必须处于statefulwidget状态.我该如何解决?<

推荐答案

它必须是 StatefulWidget

希望这会有所帮助

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class BottomNavigationBar1 extends StatefulWidget{
  @override
  _BottomNavigationBar1State createState() =>_BottomNavigationBar1State();
}

class _BottomNavigationBar1State extends State<BottomNavigationBar1>{

  int _currentIndex =0;

  static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];




  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text("BottomNavigationBar Sample"),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_currentIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _currentIndex,
        onTap: (index){
          setState(() {
            _currentIndex = index;
          });
        },
        selectedItemColor: Colors.amber,
      ),
    );
  }
}

这篇关于如何在flutter中创建带有无状态小部件的按钮导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！