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)
],
),
);
}
}
- 想要添加一个导航栏,但是为了能够改变状态(从一个页面移动到另一个页面)它需要在一个有状态的小部件中。我该如何解决这个问题?<
解决方案
它必须是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,
),
);
}
}
推荐阅读
- android - 具有自定义值的自定义属性的 Android BindAdapter(类似于可见属性)
- node.js - node.js 堆内存和使用的堆大小 [pm2]
- oauth - JWT:使用 grant_type=password 时刷新令牌的优势是什么
- jsf - JSF 条件样式在运行时不起作用
- reactjs - Graphql 查询中的参数无效
- kubernetes - 是否可以将磁盘安装到 gke pod 和计算引擎
- flutter - Flutter项目中pubspec.lock文件有什么用
- elixir - handle_event 不适用于 Phoenix LiveView 示例
- javascript - 如何在 React 中动态更改文本的颜色?
- python - Web Scraping - 从多个页面中提取文本列表