Flutter学习指南（7）：常用的控件

Flutter又提供了一套Material风格（Android默认的视觉风格）和一套Cupertino风格（iOS视觉风格）的widget库。要使用基础widget库，需要先导入下面三者之一 。我们绝大多数情况下使用material。
注意： 不懂的属性设置一下代码跑一下就知道了。

import 'package:flutter/widgets.dart';  ## 基础控件风格
import 'package:flutter/material.dart';  ## android风格
import 'package:flutter/cupertino.dart';  ### iOS风格

文本Text

Text("Hello world",
  textAlign: TextAlign.center,     ## 对齐方式
  maxLines: 1,    ### 几行
  overflow: TextOverflow.ellipsis,  ## 溢出方式 
  textScaleFactor: 1.5,   ### 字体。默认值将为1.0。 快速设置不设置fontSize的话
   style: TextStyle(
       color: Colors.blue,
        fontSize: 18.0,
        height: 1.2,     ## 行高== fontSize*height
        fontFamily: "Courier",   ## 字体
        background: new Paint()..color=Colors.yellow,
        decoration:TextDecoration.underline,
        decorationStyle: TextDecorationStyle.dashed
  ),
);

文本TextSpan

TextSpan(
       text: "https://flutterchina.club",
       style: TextStyle(
         color: Colors.blue
       ),  
       recognizer: _tapRecognizer ,   ## 手势，如点击
       child()
     ),
      

富文本的使用

Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutterchina.club",
       style: TextStyle(
         color: Colors.blue
       ),  
       recognizer: _tapRecognizer
     ),
    ]
))

默认文本样式DefaultTextStyle

DefaultTextStyle(
  //1.设置文本默认样式  
  style: TextStyle(
    color:Colors.red,
    fontSize: 20.0,
  ),
  textAlign: TextAlign.start,
  child: Column(   ### 所有的子节点都是上面的设置
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text("hello world"),
      Text("I am Jack"),
      Text("I am Jack",
        style: TextStyle(
          inherit: false, //2.不继承默认样式
          color: Colors.grey
        ),
      ),
    ],
  ),
);

字体的设置

在pubspec.yaml(空格严格)中引入字体文件

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Medium.ttf
          weight: 500
        - asset: assets/fonts/Raleway-SemiBold.ttf
          weight: 600
    - family: AbrilFatface
      fonts:
        - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf

使用字体
想使用第三方包内的引入目录变更就可以
fonts:
- asset: packages/my_package/fonts/Raleway-Medium.ttf

// 声明文本样式
const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

// 使用文本样式
var buttonText = const Text(
  "Use the font for this text",
  style: textStyle,
);

悬浮按钮RaisedButton

RaisedButton(
  child: Text("normal"),
  onPressed: () => {},
);

扁平按钮FlatButton

FlatButton(
  child: Text("normal"),
  onPressed: () => {},
)

差行按钮OutlineButton

OutlineButton(
  child: Text("normal"),
  onPressed: () => {},
)

图标按钮IconButton

IconButton(
  child: Text("normal"),
  onPressed: () => {},
)

自定义按钮

FlatButton(
  color: Colors.blue,
  highlightColor: Colors.blue[700],
  colorBrightness: Brightness.dark,
  splashColor: Colors.grey,
  child: Text("Submit"),
  shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
  onPressed: () => {},
)

图片框Image

本地图片先引入： 在pubspec.yaml中的flutter部分添加如下内容：
assets:

• images/avatar.png

Image(
  image: AssetImage("images/avatar.png"),  ##本地引入
  image: NetworkImage(   ## 网络引入二选一
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
  height: 100, //图片高度
  color:Colors.blue , //图片的混合色值
  colorBlendMode: BlendMode.difference , //混合模式
  fit: BoxFit,//缩放模式
  alignment : Alignment.center, //对齐方式
  repeat : ImageRepeat.noRepeat, //重复方式
);

fit 方式

矢量图icon

体积小：可以减小安装包大小。
矢量的：iconfont都是矢量图标，放大不会影响其清晰度。
可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
可以通过TextSpan和文本混用。
Material中有一套

String icons = "";
// accessible:  or 0xE914 or E914
icons += "\uE914";
// error:  or 0xE000 or E000
icons += " \uE000";
// fingerprint:  or 0xE90D or E90D
icons += " \uE90D";

Text(icons,
  style: TextStyle(
      fontFamily: "MaterialIcons",
      fontSize: 24.0,
      color: Colors.green
  ),
)

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.accessible,color: Colors.green,),
    Icon(Icons.error,color: Colors.green,),
    Icon(Icons.fingerprint,color: Colors.green,),
  ],
)

自定义icon图标
阿里矢量图库
将图片转换成tiff格式
在字体中引入

fonts:
  - family: myIcon  #指定一个字体名
    fonts:
      - asset: fonts/iconfont.ttf

自定义和一个类

class MyIcons{
  // book 图标
  static const IconData book = const IconData(
      0xe614, 
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
  // 微信图标
  static const IconData wechat = const IconData(
      0xec7d,  
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
}

使用

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(MyIcons.book,color: Colors.purple,),
    Icon(MyIcons.wechat,color: Colors.green,),
  ],
)

单选开关和复选框

注意 ： 本身不保存状态和移动端的一样 ，所以要在继承State类中管理状态，也就是要自己自定义管理私有属性. dart语言下划线就是私有属性。
重要：Switch和Checkbox属性比较简单，读者可以查看API文档（command/ctrl + 左键），它们都有一个activeColor属性，用于设置激活态的颜色。至于大小，到目前为止，Checkbox的大小是固定的，无法自定义，而Switch只能定义宽度，高度也是固定的。值得一提的是Checkbox有一个属性tristate ，表示是否为三态，其默认值为false ，这时Checkbox有两种状态即“选中”和“不选中”，对应的value值为true和false ；如果其值为true时，value的值会增加一个状态null，读者可以自行了解。

class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  @override
  _SwitchAndCheckBoxTestRouteState createState() => new _SwitchAndCheckBoxTestRouteState();
}

class _SwitchAndCheckBoxTestRouteState extends State {
  bool _switchSelected=true; //维护单选开关状态
  bool _checkboxSelected=true;//维护复选框状态
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Switch(
          value: _switchSelected,//当前状态
          onChanged:(value){
            //重新构建页面  
            setState(() {
              _switchSelected=value;
            });
          },
        ),
        Checkbox(
          value: _checkboxSelected,
          activeColor: Colors.red, //选中时的颜色
          onChanged:(value){
            setState(() {
              _checkboxSelected=value;
            });
          } ,
        )
      ],
    );
  }
}

下一篇比较重要的控件