Flutter StatefulWidget:有状态的小部件
需要 setState() 设置内容,就需要使用到 StatefulWidget,而此前,我们都不需要用到,所以一直在使用 StatelessWidget。
而现在,因为 bottomNavigationBar 的切换需要 setState(),所以需要。
创建 BottomNavigationBarDemo.dart:
import 'package:flutter/material.dart';
class BottomNavigationBarDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _BottomNavigationBarDemoState();
}
}
class _BottomNavigationBarDemoState extends State<BottomNavigationBarDemo> {
int _currentIndex = 0;
void _onTapHandler (int index) {
setState(() {
_currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
currentIndex: _currentIndex,
onTap: _onTapHandler,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.red,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.edit),
title: Text('edit'),
),
BottomNavigationBarItem(
icon: Icon(Icons.cached),
title: Text('cached'),
),
BottomNavigationBarItem(
icon: Icon(Icons.save),
title: Text('save'),
),
BottomNavigationBarItem(
icon: Icon(Icons.face),
title: Text('face'),
),
],
);
}
}
main.dart:
import 'package:flutter/material.dart';
import 'demo/DrawerDemo.dart';
import 'demo/BottomNavigationBarDemo.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
theme: ThemeData(
primaryColor: Colors.orange,
highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
splashColor: Colors.white70,
),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
title: Text('Muzico'),
elevation: 0.0,
bottom: TabBar(
unselectedLabelColor: Colors.black38,
indicatorColor: Colors.green,
indicatorSize: TabBarIndicatorSize.label,
indicatorWeight: 5.0,
tabs: <Widget>[
Tab(icon: Icon(Icons.local_bar),),
Tab(icon: Icon(Icons.local_cafe),),
Tab(icon: Icon(Icons.local_offer),),
],
),
),
body: TabBarView(
children: <Widget>[
Icon(Icons.local_bar, size: 128.0, color: Colors.black12,),
Icon(Icons.local_cafe, size: 128.0, color: Colors.black12,),
Icon(Icons.local_offer, size: 128.0, color: Colors.black12,),
],
),
drawer: DrawerDemo(),
bottomNavigationBar: BottomNavigationBarDemo(),
),
);
}
}