测试地址:(网页比较慢的,要等一会)
网页演示
1. 创建项目
flutter create example004_statefulwidget
2. AS打开项目
3. 修改main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget
{
@override
_StateFullState createState() {
return _StateFullState();
}
}
class _StateFullState extends State<StatefulWidget>
{
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "StatefulWidget基础组件",
theme: ThemeData(
primarySwatch: Colors.blue
),
home: Scaffold(
appBar: AppBar(
title: Text("StatefulWidget基础组件"),
),
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,),label: "首页"),
BottomNavigationBarItem(icon: Icon(Icons.list,color:Colors.grey,),activeIcon: Icon(Icons.home,color:Colors.blue,),label: "列表"),
],),
body: _currentIndex==0?RefreshIndicator(child: ListView(children: [Container(
alignment: Alignment.center,
child: Column(
children: [
Image.network("https://img-home.csdnimg.cn/images/20201124032511.png",width: 100,height: 100,),
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(5, 0, 0, 0),
hintText: "请输入你的年龄",
hintStyle: TextStyle(fontSize: 15)
),
),
Container(
height: 100,
margin:EdgeInsets.only(top:10),
decoration: BoxDecoration(color: Colors.lightBlueAccent),
child: PageView(
children: [
_item('Page1',Colors.deepPurple),
_item('Page2',Colors.green),
_item('Page3',Colors.deepOrange),
],
),
)
],
)
,
),Text("aaa")],), onRefresh: handleRefresh):Text("bbb"),
),
);
}
Future<Null> handleRefresh() async{
await Future.delayed(Duration(milliseconds: 200));
return null;
}
_item(String title,Color color)
{
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(color:color),
child: Text(title,style: TextStyle(fontSize: 22,color: Colors.white)),
);
}
}
4. 调试运行
AS中先打开Android或者iOS模拟器,点运行按钮。
或在命令行中运行:
flutter run
5. 打包web
flutter build web
测试地址:(网页比较慢的,要等一会)
网页演示