StatefulWidget常用教程组件
StatefulWidget常用基础总结,我也是刚刚开始学Flutter,总结一下主要用于以后学习,避免忘记。
我学习视频的那个老师博客地址,老师说的很不错,清晰易懂。
Flutter学习第一天:小伙花饭钱去买Flutter教学视频,只为了知道Flutter是否支持双系统开发?
Flutter学习第二天:Dart常用数据类型以及方法大总结,满满的干货,对于学过Python和java的太友好了?
Flutter学习的第三天:面向对象编程Dart语言的学习还能让我回忆java基础,“诚不欺我”真的能够快速上手。
Flutter学习第四天:StatelessWidget常用组件总结,撑起Flutter的半边天?
1.页面切换BottomNavigationBar
粘贴代码到你的Android Studio的时候,如果排布不好看,可以使用Ctrl+Alt+L快速格式。
Flutter学习第四天:StatelessWidget常用组件总结,撑起Flutter的半边天?
int _currentIndex=0; //初始化为0
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index){
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('列表'),
)
],
),
body: _currentIndex == 0
? Center(
child: ListView(
children: <Widget>[
Text('首页'),
],
),
)
: Text('列表'),
效果:
2.RefreshIndicator
代码:
body: RefreshIndicator(
child: ListView(
children:<Widget> [
Container(
decoration: BoxDecoration(color: Colors.white),
alignment: Alignment.center,
child: Column(
children:<Widget> [
Image.network(
'https://i.ibb.co/CQf368G/fbf18c6a86-Bd6-LF.jpg',
width: 100,
height: 200,
)
],
),
)
],
),
onRefresh: _handleRefresh,
),
Future<Null> _handleRefresh() async {
await Future.delayed(Duration(milliseconds: 200));
return null;
}
扫描二维码关注公众号,回复:
12471483 查看本文章

3.FloatingActionButton
代码:
floatingActionButton: FloatingActionButton(
onPressed: null,
child: Icon(
Icons.add,
size: 20,
),
),
效果:
4.TextField
代码:
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(5, 0, 0, 0),
hintText: '请输入',
hintStyle: TextStyle(fontSize: 15)
),
)
5.PageView
Container(
height: 100,
margin: EdgeInsets.only(top: 10),
decoration:
BoxDecoration(color: Colors.lightBlueAccent),
child: PageView(
children:<Widget> [
_item('Page1',Colors.deepPurple), //_item私有方法如下
_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),
),
);
效果:
滑动切换页面PageView