前端开发进阶篇——Flutter基础组件

1. 基础组件

• 文本及样式

        Text用于显示简单样式文本，它包含一些控制文本显示样式的一些属性。

            1）textAlign：文本的对齐方式；可以选择左对齐、右对齐还是居中。

• center: 文本以居中形式对齐,这个也算比较常用的了。

• left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。

• right :右对齐，使用频率也不算高。

• start:以开始位置进行对齐，类似于左对齐。

• end: 以为本结尾处进行对齐，不常用。有点类似右对齐。

            2）maxLines、overflow：指定文本显示的最大行数，默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文·本，可以通过overflow来指定截断方式，默认是直接截断。              

• clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。

• ellipsis:在后边显示省略号，体验性较好，这个在工作中经常使用。

• fade: 溢出的部分会进行一个渐变消失的效果，是上下的渐变，不是左右。

        1）height：该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height。

        2）fontFamily ：由于不同平台默认支持的字体集不同，所以在手动指定字体时一定要先在不同平台测试一下。

        3）fontSize：该属性和Text的textScaleFactor都用于控制字体大小。但是有两个主要区别：

        4）fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。

        其中textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化。

• 按钮

    Material 组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等，它们都是直接或间接对RawMaterialButton组件的包装定制。

        1）RaisedButton 即"漂浮"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大。

        2）OutlineButton默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)。    

        3）IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景。

    RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数，通过它可以轻松创建带图标的按钮。

        4）自定义按钮外观。

    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, //按钮的内容})

• 图片及ICON

     加载图片的方式：

        1）Image.asset: 加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。

        2）Image.network: 网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。

        3）Image.file: 加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。

        Image的主要参数：

    const Image({        
        ...
        this.width, //图片的宽
        this.height, //图片高度
        this.color, //图片的混合色值
        this.colorBlendMode, //混合模式
        this.fit,//缩放模式
        this.alignment = Alignment.center, //对齐方式
        this.repeat = ImageRepeat.noRepeat, //重复方式
    ...})

• width、height：设置图片的宽、高，当不指定宽高时，图片会根据当前父容器的限制，尽可能的显示其原始大小，如果只设置width、height的其中一个，那么另一个属性默认会按比例缩放，但可以通过下面介绍的fit属性来指定适应规则。

• fit：该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。适应模式是在BoxFit中定义，它是一个枚举类型，有如下值：

        1）fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。

        2）cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。

        3）contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。

        4）fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。

        5）fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。

        6）none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。

• color和 colorBlendMode：在图片绘制时可以对每一个像素进行颜色混合处理，color指定混合色，而colorBlendMode指定混合模式。、

• repeat显示：

        1）ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。

        2）ImageRepeat.repeatX: 横向重复，纵向不重复。

        3）ImageRepeat.repeatY：纵向重复，横向不重复。

• 单选开关和复选框

        Material 组件库中提供了Material风格的单选开关Switch和复选框Checkbox，虽然它们都是继承自StatefulWidget，但它们本身不会保存当前选中状态，选中状态都是由父组件来管理的。

       它们都有一个activeColor属性，用于设置激活态的颜色。至于大小，到目前为止，Checkbox的大小是固定的，无法自定义，而Switch只能定义宽度，高度也是固定的。值得一提的是Checkbox有一个属性tristate ，表示是否为三态，其默认值为false ，这时Checkbox有两种状态即“选中”和“不选中”，对应的value值为true和false。

• 输入框及表单

        Material组件库中提供了输入框组件TextField和表单组件Form。TextField用于文本输入，它提供了很多属性。

       const TextField({                  ...
          TextEditingController controller, 
          FocusNode focusNode,
          InputDecoration decoration = const InputDecoration(),
          TextInputType keyboardType,
          TextInputAction textInputAction,
          TextStyle style,
          TextAlign textAlign = TextAlign.start,
          bool autofocus = false,
          bool obscureText = false,
          int maxLines = 1,
          int maxLength,
          bool maxLengthEnforced = true,
          ValueChanged<String> onChanged,
          VoidCallback onEditingComplete,
          ValueChanged<String> onSubmitted,
          List<TextInputFormatter> inputFormatters,
          bool enabled,
          this.cursorWidth = 2.0,
          this.cursorRadius,
          this.cursorColor,
          ...})

• controller：编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。大多数情况下我们都需要显式提供一个controller来与文本框交互。如果没有提供controller，则TextField内部会自动创建一个。controller：编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。大多数情况下我们都需要显式提供一个controller来与文本框交互。如果没有提供controller，则TextField内部会自动创建一个。

• focusNode：用于控制TextField是否占有当前键盘的输入焦点。它是我们和键盘交互的一个句柄（handle）。

• InputDecoration：用于控制TextField的外观显示，如提示文本、背景颜色、边框等。

• keyboardType：用于设置该输入框默认的键盘输入类型，取值如下：

• textInputAction：键盘动作按钮图标(即回车键位图标)，它是一个枚举值，有多个可选值。

• style：正在编辑的文本样式。

• textAlign: 输入框内编辑文本在水平方向的对齐方式。

• autofocus: 是否自动获取焦点。

• obscureText：是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换。

• maxLines：输入框的最大行数，默认为1；如果为null，则无行数限制。

• maxLength和maxLengthEnforced ：maxLength代表输入框文本的最大长度，设置后输入框右下角会显示输入的文本计数。maxLengthEnforced决定当输入文本长度超过maxLength时是否阻止输入，为true时会阻止输入，为false时不会阻止输入但输入框会变红。

• onChange：输入框内容改变时的回调函数；注：内容改变事件也可以通过controller来监听。

• onEditingComplete和onSubmitted：这两个回调都是在输入框输入完成时触发，比如按了键盘的完成键（对号图标）或搜索键。不同的是两个回调签名不同，onSubmitted回调是ValueChanged<String>类型，它接收当前输入内容做为参数，而onEditingComplete不接收参数。

• inputFormatters：用于指定输入格式；当用户输入内容改变时，会根据指定的格式来校验。

• enable：如果为false，则输入框会被禁用，禁用状态不接收输入和事件，同时显示禁用态样式（在其decoration中定义）。

• cursorWidth、cursorRadius和cursorColor：这三个属性是用于自定义输入框光标宽度、圆角和颜色的。