Flutter基本UI组件StatefulWidget与StatelessWidget（上）

**Flutter里StatefulWidge组件的含义为 有状态的组件类，StatelessWidget为无状态的组件，这篇只说StatefulWidget
**

先看效果图

首页是一个可以左右滑动的ViewPager，我的里面是一个TextView,EditText

贴一下代码

import 'package:flutter/material.dart';



class StatefulLearn extends StatefulWidget {
  @override
  _StatefulLearnState createState() => _StatefulLearnState();
}


class _StatefulLearnState extends State {
  var _currentIndex=0;   //当前选中下标
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "我的导航栏app",
      home: Scaffold(
      body: _currentIndex==0?Container(
          child: PageView(
            children: [
              _item("page1",Colors.blue),
              _item("page2",Colors.red),
              _item("page3",Colors.yellow),
            ],
          ),
        ):RefreshIndicator(  //下拉刷新控件
          child: ListView(
             children: [
               Container(
                 child: Text("我的里面的内容"),
                 color: Colors.red,
               ),
               Container(
                 child: TextField(
                  maxLength: 10,
                   maxLines: 1,
                   decoration: InputDecoration(
                     icon:new Icon( Icons.home),
                     hintText: "请输入姓名",
                     hintStyle: TextStyle(
                       fontSize: 18
                     )

                   ),
                 ),
               )
             ],
          ),
          onRefresh:_refreshHandler ,
        ),


        bottomNavigationBar: BottomNavigationBar(
          //样式
          items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.home,color: Colors.grey),
            activeIcon: new Icon(Icons.home,color: Colors.blue),
            title: new Text("首页")

          ),

          BottomNavigationBarItem(
              icon: new Icon(Icons.list,color: Colors.grey),
              activeIcon: new Icon(Icons.list,color: Colors.blue),
              title: new Text("我的")
          )
        ],
          //设置选中下标
          currentIndex: _currentIndex,
          onTap: (i){
            setState(() {
              _currentIndex=i;
            });
          },
        ),
      ),
    );
  }

//下拉刷新 200ms完成刷新  
  Future _refreshHandler() async{
    await Future.delayed(Duration(milliseconds: 500));
  }


//PageView的item布局  方法
  _item(String t, Color c) {
      return Container(
        decoration: BoxDecoration(
          color: c
        ),
        child: new Text(
          t,style: new TextStyle(
          color: Colors.white,
          fontSize: 20
        ),

        ),
      );
  }


}