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(),
        ),
      );
    }
}