# flutter 学习笔记

# 组件的使用
* Text文字组件
  * `textAlign: TextAlign.start,` // 文本对齐方式
  * `textDirection: TextDirection.ltr` // 文本方向
  * `maxLines:1` // 最大行数
  * `textScaleFactor: 1.5,` // 文字缩放
  * `overflow: TextOverflow.ellipsis,` // 超出处理
  * `style:`
    * TextStyle组件
    ```dart
      TextStyle(
        color: Colors.blue,
        fontSize: 18.0,
        height: 1.2,  
        fontFamily: "Courier",
        background: new Paint()..color=Colors.yellow,
        decoration:TextDecoration.underline,
        decorationStyle: TextDecorationStyle.dashed
      ),
    ```
  * 文本接合,多个textSpan对文本进行修饰，然后拼合在一起
  ```dart
    Text.rich(TextSpan(
      children: [
        TextSpan(
          text: "https://flutterchina.club",
          style: TextStyle(
            color: Colors.blue
          ),  
          recognizer: _tapRecognizer
        ),
        ...
      ]
    ))
  ```
  * 字体设置[链接]('https://book.flutterchina.club/chapter3/text.html')
* 按钮
  * `RaisedButton` // 悬浮按钮
  * `FlatButton` // 扁平按钮
  * `OutlineButton` // 默认有边框
  * `IconButton` // 可点击的icon
    * `icon: Icon(Icons.thumb_up),`
  * 前三个都可以加`.icon`然后属性变成`icon`和`label`
  * 自定义
  ```dart
    const FlatButton({
      ...  
      @required this.onPressed, //按钮点击回调
      this.textColor, //按钮文字颜色
      this.disabledTextColor, //按钮禁用时的文字颜色
      this.color, //按钮背景颜色
      this.disabledColor,//按钮禁用时的背景颜色
      this.highlightColor, //按钮按下时的背景颜色
      this.splashColor, //点击时，水波动画中水波的颜色
      this.colorBrightness,//按钮主题，默认是浅色主题 
      this.padding, //按钮的填充
      this.shape, //外形
      @required this.child, //按钮的内容
    })
  ```
* 图片
  * pubspec.yaml配置
    ```yaml
      assets:
        - images/avatar.png
    ```
  * 加载图片
    ```dart
      Image(
        image: AssetImage("images/avatar.png"),
        width: 100.0
      );
      Image.asset("images/avatar.png",
        width: 100.0,
      )
      Image(
        image: NetworkImage(
            "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
        width: 100.0,
      )
      Image.network(
        "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
        width: 100.0,
      )
      const Image({
        ...
        this.width, //图片的宽
        this.height, //图片高度
        this.color, //图片的混合色值
        this.colorBlendMode, //混合模式
        this.fit,//缩放模式
        this.alignment = Alignment.center, //对齐方式
        this.repeat = ImageRepeat.noRepeat, //重复方式
        ...
      })
    ```
* ICON
  * `Icon(Icons.accessible,color: Colors.green,),`
  * 使用自定义字体图标[链接]('https://book.flutterchina.club/chapter3/img_and_icon.html')
* Switch开关组件
  * `value: true`
  * `onChanged`
* Checkbox多选组件
  * `value: true`
  * `onChanged` 
* Stack层叠组件 
  * 定位相对于父元素
  * `alignment: Alignment.center` // 总体控制
  * `alignment: Alignment(0,0)` // float(-1~1) 0,0居中
  * `children:  <Widget>[]`
    * Align组件
      * `alignment: Alignment.center` // 单独控制
      * `alignment: Alignment(0,0)` // float(-1~1) 0,0居中
      * `child: `  // 需要定位的子组件
    * Positioned组件
      * `left, bottom, top, right` // int 默认为0
      * `child: ` // 需要定位的子组件image
* AspectRatio组件
  * 默认横向占满父组件
  * 可以用来控制图片
  * `aspectTatio: 2.0/1.0`  // 宽高比
  * `child: ` // 子组件
* Card组件
  * `margin: EdgeInsets.all(10)` // 外边距
  * `child: ` // 子组件
* ClipOval组件
  * 可以用来裁剪原型头像
  * `child: ` // 子组件
* CircleAvatar组件
  * 感觉可以自适应头像大小
  * `backgroungImage: NetworkImage('src')`
* RaisedButton组件
  * `child:` // 子组件
  * `textColor: Theme.of(context).accentColor,` // 文字颜色
  * `textColor: Colors.red,` // 文字颜色
  * `onPressed: (){}` // 点击事件
* Warp组件
  * 相对于父组件横向占满
  * 可以自动换行
  * `spacing: 10,` // 元素和元素之间的距离
  * `runSpacing: 10` // 元素在纵轴之间的距离
  * `alignment: WarpAlignment.srart` // 水平对齐方式 
  * `runAlignment: WarpAlignment.spaceAround` // 纵向对齐方式
  * `direction: Axis.vertical` // 纵向排列
* SizedBox组件
  * `height: 30,`
  * `width:10,`
  * 空白盒子
* StatefullWidget
  * `setState((){})` 修改需要刷新的内容,类似小程序的setData
* Scaffold组件
  * appBar组件
    * `title: Text('text')` // 标题
    * `backgroundColor: Colors.red` // 背景颜色
    * `leading: IconButton(icon: Icon(Icons.menu), onPressed:(){})` // 左边加东西
    * `actions: <Widget>[]` // 右边加东西
    * `centerTitle: true` // 不论是不是ios都给居中显示
    * 菜单栏
      ```dart 
        DefaultTabController(
          length : 2, // tab的个数
          child: Scafford(
            appBar: AppBar(
              title: Text('title'),
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(text:'1'),
                  Tab(text:'2'),
                  Tab(text:'3'),
                ]
              )
            ),
            body: TabBarView(
              children: <Widget>[
                Text('text1'),
                Text('text2'),
                Text('text3'),
              ]
            )
          )
        )
      ```
      * TabBar组件
        * `indicatorColor: Colors.red,`
        * `isScrollable: true` // 允许滑动
        * `tabs: <Widget>[]`
          * Tab组件
            * `text:"text"`
      * TabBarView组件
        * `children: <Widget>[]`
  * body
  * bottomNavigationBar组件
    * `currentIndex: 0,` // 当前选中的tab
    * `onTap: (int index){}` // 点击事件,默认参数是点击了第几个按钮
    * `items: <BottomNavigationBarItem>[]` // 按钮内容
      * BottomNavigationBarItem组件
        * `icon: Icon(Icons.home),` // 图标
        * `title: Text('主页')` // 文字
  * floatingActionButton浮动按钮组件
    * child:
    * onPressed: (){}
* Navigator路由跳转组件
  ```dart
    // 路由跳转
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context)=> FormPage(参数)
      )
    )
    // 返回上一界面
    Navigator.of(context).pop()
    // 替换掉当前界面
    Navigator.of(context).pushReplacementNamed('/home')
    // 重置路由
    Navigator.of(context).pushAndRemoveUntil(
      new MaterialPageRoute(
        builder: (context) => new Tabs(index: 1),
      ),
      (route) => route == null
    )
  ``` 
  * MaterialPageRoute
    * `WidgetBuilder builder` // 是一个WidgetBuilder类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个widget。我们通常要实现此回调，返回新路由的实例。
    * `RouteSettings settings` // 包含路由的配置信息，如路由名称、是否初始路由（首页）。
    * `bool maintainState = true,` // 默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置maintainState为false。
    * `bool fullscreenDialog = false,` // 表示新的路由页面是否是一个全屏的模态对话框，在iOS中，如果fullscreenDialog为true，新页面将会从屏幕底部滑入（而不是水平方向）。
* MaterialApp
  * `debugShowCheckedModeBanner: false` // 去除斜着的debug标识
  * routes
    ```dart
      routes: {
        '/form': (context) => FromPage(),
        '/search': (context) => SearchPage(),
      }

      Navigator.pushNamed(context, '/search')

      // 在跳转到的路由的build方法里写
      var args=ModalRoute.of(context).settings.arguments;
      // 就可以传输参数了
      Naviagtor.pushNamed(context, '/search', arguments:{"id": 123});

      // 或者是定义路由的时候进行传参，这样就可以正常的使用了
      routes: {
        "tip2": (context){
          return TipRoute(text: ModalRoute.of(context).settings.arguments);
        },
      }, 
    ```
  * `initialRoute: '/'` // 初始化加载的路由
  * 对于路由的固定写法
    ```dart
      // Route.dart
      import 'package:flutter/material.dart';
      import '../pages/Tabs.dart';
      import '../pages/Search.dart';
      import '../pages/Form.dart';

      final Map<String, Function> routes = {
        '/':(contxt,{arguments})=>Tabs(),
        '/search':(contxt,{arguments}) =>SearchPage(arguments: arguments),
        '/form': (context,{arguments}) =>FormPage(arguments: arguments),
      };
      
      // 这个东西实际上是一个路由生成钩子，只有在没有找到指定路由的时候才会被调用，当前没有设置route所有的路由都会经过这个钩子进行处理，这里也可以当成路由守卫，判断各种权限然后进行路由的导航
      var onGenerateRoute=(RouteSettings settings) {
        // 统一处理
        final String name = settings.name;   
        final Function pageContentBuilder = routes[name];        

        if (pageContentBuilder != null) {
          if (settings.arguments != null) {
            final Route route = MaterialPageRoute(
              builder: (context) =>
                pageContentBuilder(context, arguments: settings.arguments));
            return route;
          } else {
            final Route route = MaterialPageRoute(
              builder: (context) =>
                pageContentBuilder(context));
            return route;
          }
        }
      };
      // main.dart
      import 'package:flutter/material.dart';
      import 'routes/Routes.dart';
      void main() => runApp(MyApp());

      class MyApp extends StatelessWidget {  
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            // home:Tabs(),
            initialRoute: '/',      
            onGenerateRoute: onGenerateRoute
          );
        }
      }
      // 路由跳转
      Naviagtor.pushNamed(context, '/search', arguments:{"id": 123});
    ```
* 资源管理 `pubspec.yaml`
  ```yaml
  flutter:
    assets:
      - assets/my_icon.png
      - assets/background.png
  ```
  assets指定应包含在应用程序中的文件， 每个asset都通过相对于pubspec.yaml文件所在的文件系统路径来标识自身的路径。asset的声明顺序是无关紧要的，asset的实际目录可以是任意文件夹（在本示例中是assets文件夹）  
* 在Widget树中获取State对象
  * 方法一
  ```dart
    // 直接通过of静态方法来获取ScaffoldState 
    ScaffoldState _state=Scaffold.of(context); 
    _state.showSnackBar(
      SnackBar(
        content: Text("我是SnackBar"),
      ),
    );
  ```
  * 方法二
  ```dart
    //定义一个globalKey, 由于GlobalKey要保持全局唯一性，我们使用静态变量存储
    static GlobalKey<ScaffoldState> _globalKey= GlobalKey();
    ...
    Scaffold(
        key: _globalKey , //设置key
        ...  
    )
    _globalKey.currentState.openDrawer()
  ```
  GlobalKey是Flutter提供的一种在整个APP中引用element的机制。如果一个widget设置了GlobalKey，那么我们便可以通过globalKey.currentWidget获得该widget对象、globalKey.currentElement来获得widget对应的element对象，如果当前widget是StatefulWidget，则可以通过globalKey.currentState来获得该widget对应的state对象。
*