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

更多相关文章

随机推荐