StatefulWidget与组件

1、

MaterialApp:他是一个材料设计的app组件，通常用于放在界面的根节点

Scaffold:是flutter封装的一个带有AppBar、底部的导航栏BottomNavigationBar、侧边栏等这些效果的一个组件，也就是说借助Scaffold，可以轻松地实现一个flutter的页面

AppBar: 就是App顶部的导航栏

BotomNavigationBar:是App底部的导航栏

RefreshIndication:刷新的指示器

Image:图片组件

TextField:输入框组件

PageView: PageView组件

2、

MaterialApp:通过它可以很轻松地设计一个材料设计的App

继承自StatefulWidget,允许设置标题title、主题theme、home节点（就是整个页面）、

 

3、

Scaffold:通过Scaffold可以很轻松地实现app的appBar的设置、body的设置、右侧的悬浮按钮floatingActionButton的设置、侧边栏drawer的设置、底部的导航栏bottomNavigationBar的设置

它是一个完整的页面

4、

BottomNavigationBar:底部导航栏

至少设置两个BottomNavigationBarItem

 

改变底部导航栏的状态

 

界面切换：

 

5、

FloatingActionButton:右侧的悬浮框

6、

RefreshIndicator:刷新组件，一定要配合列表一起使用

 

7、

ImageView:网上加载图片

8、

TextField:输入框

 

9、

PageView:可以左右滑动

 

 

10、

代码：

import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';

void main() => runApp(LessGroupPage());


//StatefulWidget与基础组件
class StateFulGroup extends StatefulWidget{
  @override
  State<StatefulWidget> createState()  => _StateFulGroupState();
}

class _StateFulGroupState extends State<StateFulGroup>{
  int _currentIndex=0;
  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)),
    );
  }
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle=TextStyle(fontSize: 20);

    return MaterialApp(
      title: 'StatefulWidget与基础组件',
      theme: ThemeData(

        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('StatefulWidget与基础组件')),
        bottomNavigationBar: BottomNavigationBar(
          //默认选中第0个
          currentIndex: _currentIndex,
            onTap: (index){
              setState(() {
                //当点击后回调该方法，改变点击的index
                _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('列表')
          )
        ]),
        floatingActionButton: FloatingActionButton(
          onPressed: null,
          child: Text('点我')
        ),

        body: _currentIndex==0?
        RefreshIndicator(
            child:
            ListView(
                children: <Widget>[
                  Container(
          decoration: BoxDecoration(color: Colors.blue),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              //网上加载图片
              Image.network('http://www.devio.org/img/avatar.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: <Widget>[
                    _item("Page1", Colors.deepPurple),
                    _item("Page2", Colors.green),
                    _item("Page3", Colors.red),
                  ],
                ),
              )
            ],
          ),
        )
                ]
            ),
            onRefresh: _handleRefresh)
            :Text("列表"),
      ),
    );


  }

}

//StateLessWidget与基础组件
class LessGroupPage extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle=TextStyle(fontSize: 20);
    return MaterialApp(
      title: 'StatelessWidget与基础组件',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('StatelessWidget与基础组件')),
        body: Container(
          decoration: BoxDecoration(color: Colors.blue),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Text('I am an Text',style: textStyle),
              Icon(Icons.android,size: 50,color: Colors.red),
              CloseButton(),
              BackButton(),
              Chip(
              //材料设计中一个非常有趣的小部件
                avatar: Icon(Icons.people),
                label: Text('StatelessWidget与基础组件'),
              ),
              Divider(
                height: 10,//容器高度，不是线的高度
                indent: 10,//左侧间距
                color: Colors.orange
              ),
              Card(
                color: Colors.red,
                elevation: 5,//阴影
                margin: EdgeInsets.all(10),
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Text('I am Card',style: textStyle,),
                ),
              ),
              AlertDialog(
                title: Text('盘它'),
                content: Text('你这个糟老头子坏得很'),
              )
            ],
          ),
        ),
      ),
    );
  }
}