第004例-statefulwidget-(学习Flutter第1天)

测试地址:(网页比较慢的，要等一会)
网页演示

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

测试地址:(网页比较慢的，要等一会)
网页演示