flutter填坑之旅（有状态组件StatefulWidget）

今天我们来看看flutter的StatefulWidget（有状态组件），最常用就是app 主页的底部导航栏的应用

效果图

首页

关于

我的

statefull-widget-learn .dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:my_first_app/child/widget/about.dart';
import 'package:my_first_app/child/widget/first.dart';
import 'package:my_first_app/child/widget/mine.dart';

///程序入口main
void main() => runApp(StatefullWidgetLearn());

class StatefullWidgetLearn extends StatefulWidget {
  @override
  _StatefullWidgetLearnState createState() => _StatefullWidgetLearnState();
}

class _StatefullWidgetLearnState extends State<StatefullWidgetLearn> {
  // 定义一个变量监听当前激活的ID
  int _currentIndex = 0;

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = TextStyle(fontSize: 20);
    return MaterialApp(
      title: 'StatefulWidget有状态组件',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('StatefulWidget有状态组件'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex, // 设置当前激活id等于_currentIndex
          onTap: (index) {
            // 点击后将当前选中id 赋值给 _currentIndex变量
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.home,
                  color: Colors.grey,
                ),
                activeIcon: Icon(
                  Icons.home,
                  color: Colors.blue,
                ),
                title: Text('首页')),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.list,
                  color: Colors.grey,
                ),
                activeIcon: Icon(
                  Icons.list,
                  color: Colors.blue,
                ),
                title: Text('关于')),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.list,
                  color: Colors.grey,
                ),
                activeIcon: Icon(
                  Icons.list,
                  color: Colors.blue,
                ),
                title: Text('我的'))
          ],
        ),
        body: _currentIndex == 0
            ? RefreshIndicator(
                //RefreshIndicator下拉刷新组件
                child: ListView(
                  ///ListView是一个列表组件，然它的子组件
                  ///也是一个Widget
                  ///在dart中万物皆对象
                  ///然而在flutter中处处是组件
                  ///然后再调用first组件，玩过vue的同学应该很了解这个
                  children: <Widget>[First()],
                ),
                onRefresh: handleRefesh,
              )
            : _currentIndex == 1
                ? RefreshIndicator(
                    child: ListView(
                      children: <Widget>[About()],
                    ),
                    onRefresh: handleRefesh,
                  )
                : RefreshIndicator(
                    child: ListView(
                      children: <Widget>[Mine()],
                    ),
                    onRefresh: handleRefesh,
                  ),
      ),
    );
  }

  Future<Null> handleRefesh() async {
    await Future.delayed((Duration(milliseconds: 200)));
  }
}

about.dart

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

class About extends StatefulWidget {
  @override
  _AboutState createState() => _AboutState();
}

class _AboutState extends State<About> {
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = TextStyle(fontSize: 20);
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      alignment: Alignment.center,
      child: Column(
        children: <Widget>[
          Card(
            color: Colors.blue,
            elevation: 5,
            margin: EdgeInsets.all(10),
            child: Container(
              padding: EdgeInsets.all(10),
              child: Text(
                'I am card',
                style: textStyle,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

mine.dart

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

class Mine extends StatefulWidget {
  @override
  _MineState createState() => _MineState();
}

class _MineState extends State<Mine> {
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = TextStyle(fontSize: 20);
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      alignment: Alignment.center,
      child: Column(
        children: <Widget>[
          Text('I like the app', style: textStyle),
          Icon(Icons.android, size: 50, color: Colors.red),
        ],
      ),
    );
  }
}

first.dart

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

class First extends StatefulWidget {
  @override
  _FirstState createState() => _FirstState();
}

class _FirstState extends State<First> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      alignment: Alignment.center,
      child: Column(
        children: <Widget>[
          Container(
            height: 100,
            margin: EdgeInsets.only(top: 10),
            decoration: BoxDecoration(color: Colors.lightBlueAccent),
            child: PageView(
              children: <Widget>[
                _item('page1', Colors.deepPurple),
                _item('page2', Colors.green),
                _item('page3', Colors.red)
              ],
            ),
          )
        ],
      ),
    );
  }

  _item(String title, Color color) {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(color: color),
      child: Text(
        title,
        style: TextStyle(fontSize: 22, color: Colors.white),
      ),
    );
  }
}