flutter常用组件

### Container(盒容器)
```dart
@override
  Widget build(BuildContext context){
    return Container(
      decoration: new BoxDecoration(
        color:Colors.yellow
      ),
      child: Flex(
        direction: Axis.horizontal,
        children: <Widget>[
        FlatButton(
          child: Text("按钮"),
          textColor: Colors.red,
          onPressed: (){
              dalog(context);
            },
        )
      ],),
    );
  }

主要是关注decoration (装饰) 可以设置container的属性，这里color指的是背景色

decoration还可以设置background背景图片

decoration: BoxDecoration(
  image: DecorationImage(
    image: AssetImage("images/login.jpg"),
    fit: BoxFit.cover
  )
),

AlertDialog(提示框)

 @override
  Widget build(BuildContext context){
    return Container(
      child: FlatButton(
          child: Text("按钮"),
          textColor: Colors.red,
          onPressed: (){
              dalog(context);
            },
        )
    );
  }

void dalog(BuildContext context){
  showDialog<void>(
    context: context,
    barrierDismissible:false,
    builder: (BuildContext context){
      return AlertDialog(
        title: Text("测试"),
        content: SingleChildScrollView(
          child: ListBody(children: <Widget>[
            Text("中间内容"),
            Text("中间内容1")
          ],),
        ),
        actions: <Widget>[
          FlatButton(
              child: Text("actions"),
              onPressed: (){
                Navigator.of(context).pop(); //关闭弹框9
              },
            )
        ],
      );
    }
  );
}

simpleDialog （简洁的弹框，多步骤弹框）

@override
  Widget build(BuildContext context){
    return Container(
      child: FlatButton(
          child: Text("按钮"),
          textColor: Colors.red,
          onPressed: (){
              simpleDialog(context);
            },
        )
    );
  }

enum Department{
  one,
  two,
  three
}

Future<void> simpleDialog(BuildContext context) async{
    switch(await showDialog<Department>(
      context: context, 
      builder: (BuildContext context){
        return SimpleDialog(
            title: Text("simpletitle"),
            children: <Widget>[
              SimpleDialogOption(
                  onPressed: (){
                    Navigator.pop(context, Department.one);
                  },
                  child: Text("one"),
              ),
              SimpleDialogOption(
                  onPressed: (){
                    Navigator.pop(context, Department.two);
                  },
                  child: Text("two"),
              ),
              SimpleDialogOption(
                  onPressed: (){
                    Navigator.pop(context, Department.three);
                  },
                  child: Text("three"),
              )
            ],
          );
      }
    )) {
      case Department.one:
        print("第一种情况");
        break;
      case Department.two:
        print("第二种情况");
        break;
      case Department.three:
        print("第三种情况");
        break;
    }
}

alertdialog会返回一个结果，这样可以通过switch或其他方法做多次弹框等其他操作

BottomNavigationBar

import 'package:flutter/material.dart';
import './../main/index.dart';
import './../shopping/index.dart';
import './../product/index.dart';
import './../mine/index.dart';
class BottomBar extends StatefulWidget {
  @override
  _BottomBarState createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {
  int _index=0;
  List<Widget> list = new List<Widget>();
  @override
  void initState(){
    list
      ..add(Main())
      ..add(Product())
      ..add(Shopping())
      ..add(Mine());
      super.initState();
      //添加界面到list
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      decoration: BoxDecoration(color: Colors.white),
        child: Scaffold(
        appBar: AppBar(
          title: Text("主页"),
        ),
        body: list[_index],
        bottomNavigationBar: BottomNavigationBar(
          backgroundColor: Color.fromRGBO(245,245,245,1),
          iconSize: 15,
          showUnselectedLabels: true,
           // 超过3个bottombar需要设置这个属性为true才能
          //显示没有选中的bottombar的文字
          // fixedColor: Colors.white,
          selectedItemColor: Color.fromRGBO(254,69,67, 1),
          unselectedItemColor: Colors.grey, 
          items: [
            BottomNavigationBarItem(icon: Icon(IconData(0xe610,fontFamily: "Iconfont" ), size: 22.0,),title: Text("首页")),
            BottomNavigationBarItem(icon: Icon(IconData(0xe630, fontFamily: "Iconfont"), size: 20.0,),title: Text("全部商品")),
            BottomNavigationBarItem(icon: Icon(IconData(0xe608, fontFamily: "IconFont"), size: 22.0,),title: Text("购物车")),
            BottomNavigationBarItem(icon: Icon(IconData(0xe614, fontFamily: "IconFont"), size: 22.0,),title: Text("我的"))
          ], //这里用的是阿里图标
          currentIndex: _index,
          onTap: (int i){ //点击之后选中某个界面
            setState(() {
            _index = i; 
            });
          },
        ),
      ));
  }
}

阿里图标的使用，

把阿里图标下载到本地，选中iconfont.ttf 文件到文件根目录font下， 在pubspec.yaml中

  fonts:
    - family: Iconfont
      fonts:
        - asset: font/iconfont.ttf

在文中使用

Icon(IconData(0xe614, fontFamily: "IconFont"), size: 22.0,)

把 换成0xe620;

Padding组件

padding组件主要给元素设置padding值

@override
  Widget build(BuildContext context){
    return Padding(
      padding: EdgeInsets.only(left: 15, right: 15,top: 15),
      child: buildGrid(),
    );
  }

用padding包裹子元素，EdgeInsets 来设置padding的值，EdgeInsets.only设置top，left，bottom，right特定位置的paddng，EdgeInsets.all(); 设置上中下左位置的padding

Row元素

Widget buildGrid(){
    List<Widget> titls =[];
    Widget content;
    for(var item in list) {
      titls.add(
        Expanded(
          child: Image(image: AssetImage(item['src'])),
          flex: 1,
        )
      );
    }
    content = Row(children: titls);
    return content;
  }

在row元素厘米，可以用Expanded设置每个子元素占比多少

附带点击事件的盒子InkWell，

InkWell 带有单机双击事件等，

InkWell(
    onTap: (){
      print("1111111");
    },
    child: Text("xxxx"),
  )

按钮组件

RaisedButton：凸起的按钮，其实就是 Material Design 风格的 Button

FlatButton：扁平化的按钮

OutlineButton：线框按钮

IconButton：图标按钮

ButtonBar：按钮组

FloatingActionButton：浮动按钮

DropdownButton：下拉框按钮

TabBar, TabBarView使用

class StudentDetails extends StatefulWidget {
  @override
  _StudentDetailsState createState() => _StudentDetailsState();
}

class _StudentDetailsState extends State<StudentDetails> {
  double width = 0;
  double height = 0;
  TabController _controller;
  @override
  void initState() {
    super.initState();
    _controller = TabController(length: 3, vsync: ScrollableState());
  }

  @override
  Widget build(BuildContext context) {
    setState(() {
      width = width;
      height = height;
    });
    return Scaffold(
        appBar: AppBar(
          backgroundColor: ComColors.white,
          centerTitle: true,
          title: P(
            "每周报告",
            color: Colors.black,
            fontSize: titleSize,
          ),
          automaticallyImplyLeading: false,
          bottom: TabBar(
            controller: _controller,
            labelColor: ComColors.green,
            unselectedLabelColor: ComColors.back,
            isScrollable: false,
            indicator: UnderlineTabIndicator(
                borderSide: BorderSide(style: BorderStyle.none)),
            tabs: <Widget>[
              Text(
                "周报告"
              ),
              Text( "错题本"),
              Text( "字词闯关")
            ],
          ),
        ),
        body: TabBarView(
          controller: _controller,
          children: [
            Container(
              child: P("报告"),
            ),
            Container(
              child: P("错题本"),
            ),
            Container(
              child: P("字词闯关"),
            )
          ],
        ));
  }
}

上拉抽屉 showModalBottomSheet

可以遮住bottombar的抽屉

showModalBottomSheet(
        backgroundColor: Colors.black54,
        context: context,
        builder: (BuildContext context) {
          return Container(
            height: height,
            width: width,
            child: InkWell(
                onTap: () => Navigator.pop(context),
                child: Stack(children: [
                  Positioned(
                      bottom: 0,
                      left: 0,
                      height: 170,
                      width: width,
                      child: ClipRRect(
                        borderRadius: const BorderRadius.only(
                            topLeft: Radius.circular(15),
                            topRight: Radius.circular(15)),
                        child: Container(
                          height: 170,
                          padding: const EdgeInsets.all(20),
                          color: ComColors.white,
                          child: Column(
                            children: [
                              SheetIListtem(
                                title: "发布日常跟线任务",
                                doPress: () => {},
                              ),
                              SheetIListtem(
                                title: "问题反馈",
                                doPress: () => {
                                  Navigator.of(context).pushNamed("problem")
                                },
                              ),
                              SheetIListtem(
                                title: "发布退换货任务",
                                doPress: () => {},
                              ),
                            ],
                          ),
                        ),
                      ))
                ])),
          );
        })

showBottomSheet 不能遮住bottombar的抽屉

旋转角度的组件

RotatedBox(
                                quarterTurns: 0,
                                child: 
                              )