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<StatefulLearn> {
var _currentIndex=0; //当前选中下标
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "我的导航栏app",
home: Scaffold(
body: _currentIndex==0?Container(
child: PageView(
children: <Widget>[
_item("page1",Colors.blue),
_item("page2",Colors.red),
_item("page3",Colors.yellow),
],
),
):RefreshIndicator( //下拉刷新控件
child: ListView(
children: <Widget>[
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<Null> _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
),
),
);
}
}
更多推荐

所有评论(0)