[移动开发]Flutter笔记

一.组件

1.Container(容器)

Container({
    Key key,  //Container唯一标识符，用于查找更新
    this.alignment,  //控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式。
    this.padding,  //decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。
    Color color,  //用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。
    Decoration decoration,  //绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。
    this.foregroundDecoration,  //绘制在child前面的装饰。
    double width,  //container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局。
    double height,  //container的高度，设置为double.infinity可以强制在高度上撑满。
    BoxConstraints constraints,  //可以用来设置最大最小宽高
    this.margin,  //围绕在decoration和child之外的空白区域，不属于内容区域。
    this.transform,  //设置container的变换矩阵，类型为Matrix4。
    this.child,
  })

1。圆角边框

		Container(
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(Radius.circular(6)),
            color: const Color(0xfff4f4f4),
            border: Border.all(color: const Color(0x00000000), width: 0.5),
          ),
        ),

ps：decoration内的color属性与自身Container的color冲突，即只能存在一个

2.TextField(输入框)

  const TextField({
   Key key,
   this.controller,  //控制正在编辑文本
   this.focusNode,  //获取键盘焦点
   this.decoration = const InputDecoration(),  //边框装饰
   TextInputType keyboardType,  //键盘类型
   this.textInputAction,  //键盘的操作按钮类型
   this.textCapitalization = TextCapitalization.none,  //配置大小写键盘
   this.style,  //输入文本样式
   this.textAlign = TextAlign.start,  //对齐方式
   this.textDirection,  //文本方向
   this.autofocus = false,  //是否自动对焦
   this.obscureText = false,  //是否隐藏内容，例如密码格式
   this.autocorrect = true,  //是否自动校正
   this.maxLines = 1,  //最大行数
   this.maxLength,  //允许输入的最大长度
   this.maxLengthEnforced = true,  //是否允许超过输入最大长度
   this.onChanged,  //文本内容变更时回调
   this.onEditingComplete,  //提交内容时回调
   this.onSubmitted,  //用户提示完成时回调
   this.inputFormatters,  //验证及格式
   this.enabled,  //是否不可点击
   this.cursorWidth = 2.0,  //光标宽度
   this.cursorRadius,  //光标圆角弧度
   this.cursorColor,  //光标颜色
   this.keyboardAppearance,  //键盘亮度
   this.scrollPadding = const EdgeInsets.all(20.0),  //滚动到视图中时，填充边距
   this.enableInteractiveSelection,  //长按是否展示【剪切/复制/粘贴菜单LengthLimitingTextInputFormatter】
   this.onTap,  //点击时回调
})

 InputDecoration({
    this.icon,  //位于装饰器外部和输入框前面的图片
    this.labelText,  //用于描述输入框，例如这个输入框是用来输入用户名还是密码的，当输入框获取焦点时默认会浮动到上方，
    this.labelStyle,  // 控制labelText的样式,接收一个TextStyle类型的值
    this.helperText,  //辅助文本，位于输入框下方，如果errorText不为空的话，则helperText不会显示
    this.helperStyle,  //helperText的样式
    this.hintText,  //提示文本，位于输入框内部
    this.hintStyle,  //hintText的样式
    this.hintMaxLines,  //提示信息最大行数
    this.errorText,  //错误信息提示
    this.errorStyle,  //errorText的样式
    this.errorMaxLines,  //errorText最大行数
    this.hasFloatingPlaceholder = true,  //labelText是否浮动，默认为true，修改为false则labelText在输入框获取焦点时不会浮动且不显示
    this.isDense,  //改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小
    this.contentPadding,  //内间距
    this.prefixIcon,  //位于输入框内部起始位置的图标。
    this.prefix,  //预先填充的Widget,跟prefixText同时只能出现一个
    this.prefixText,  //预填充的文本，例如手机号前面预先加上区号等
    this.prefixStyle,  //prefixText的样式
    this.suffixIcon,  //位于输入框后面的图片,例如一般输入框后面会有个眼睛，控制输入内容是否明文
    this.suffix,  //位于输入框尾部的控件，同样的不能和suffixText同时使用
    this.suffixText,  //位于尾部的填充文字
    this.suffixStyle,  //suffixText的样式
    this.counter,  //位于输入框右下方的小控件，不能和counterText同时使用
    this.counterText,  //位于右下方显示的文本，常用于显示输入的字符数量
    this.counterStyle,  //counterText的样式
    this.filled,  //如果为true，则输入使用fillColor指定的颜色填充
    this.fillColor,  //相当于输入框的背景颜色
    this.errorBorder,  //errorText不为空，输入框没有焦点时要显示的边框
    this.focusedBorder,  //输入框有焦点时的边框,如果errorText不为空的话，该属性无效
    this.focusedErrorBorder,  //errorText不为空时，输入框有焦点时的边框
    this.disabledBorder,  //输入框禁用时显示的边框，如果errorText不为空的话，该属性无效
    this.enabledBorder,  //输入框可用时显示的边框，如果errorText不为空的话，该属性无效
    this.border,  //正常情况下的border
    this.enabled = true,  //输入框是否可用
    this.semanticCounterText,  
    this.alignLabelWithHint,
  })

1。圆角边框

		TextField(
          decoration: InputDecoration(
            hintText: "输入关键字搜寻商品",
            prefixIcon: const Icon(Icons.search),
            suffixIcon: const Icon(Icons.search),
            border: _buildOutlineInputBorder(),
            focusedBorder: _buildOutlineInputBorder(),
            disabledBorder: _buildOutlineInputBorder(),
            enabledBorder: _buildOutlineInputBorder(),
            focusedErrorBorder: _buildOutlineInputBorder(),
            errorBorder: _buildOutlineInputBorder(),
            contentPadding: const EdgeInsets.all(0),
            filled: true,
            fillColor: Colors.black12,
          ),
          cursorColor: Colors.black,
          //键盘回车键监听
          onSubmitted: (value) {
          },
        )

OutlineInputBorder _buildOutlineInputBorder() {
    return const OutlineInputBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(10),
        ),
        //无边框
        borderSide: BorderSide.none);
  }

ps：默认的OutlineInputBorder会带有一点点边框弧度，可以设置 Radius.circular(0) 作为直角边框

3.Wrap(流式布局)

  Wrap({
    Key key,
    this.direction = Axis.horizontal,   //排列方向，默认水平方向排列
    this.alignment = WrapAlignment.start,  //子控件在主轴上的起始位置
    this.spacing = 0.0,  //主轴上子控件中间的间距
    this.runAlignment = WrapAlignment.start,  //子控件在交叉轴上的对齐方式
     /*
    WrapAlignment.start//每一行（列）子Widget在纵（横）轴上的排列，全部子Widget从顶部开始展示
    WrapAlignment.end//每一行（列）子Widget在纵（横）轴上的排列，全部子Widget挨着底部展示
    WrapAlignment.center//每一行（列）子Widget在纵（横）轴上的排列，全部子widget在中间展示
    WrapAlignment.spaceBetween//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget挨着边展示
    WrapAlignment.spaceAround//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离的一半
    WrapAlignment.spaceAround//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离相等
    */
    this.runSpacing = 0.0,  //在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距
    this.crossAxisAlignment = WrapCrossAlignment.start,   //交叉轴上子控件的对齐方式
     /*
    WrapCrossAlignment.start  //水平排列时控制全部子widgets的上部对齐，垂直排列时控制全部子widgets的左边对齐
    WrapCrossAlignment.end  //水平排列时控制全部子widgets的下部对齐，垂直排列时控制全部子widgets的又边对齐
    WrapCrossAlignment.center  //设置每一行的子Widgets局中对齐
    */
    this.textDirection,   //textDirection水平方向上子控件的起始位置
    this.verticalDirection = VerticalDirection.down,  //垂直方向上子控件的其实位置
    /*
    VerticalDirection.down//设置行列widgets的展示，正常显示
  	VerticalDirection.up//倒序展示，比如，在direction: Axis.horizontal时有1、2、3行widgets，设置为up后，展示为3、2、1  
    */
    List<Widget> children = const <Widget>[],   //要显示的子控件集合
  })

4.Column(纵向线性布局)

Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,  //主轴的排序方式
    /*
    MainAxisAlignment.start主轴顶部(默认Y轴左边)
    MainAxisAlignment.end主轴底部(默认Y轴右边)
    MainAxisAlignment.center主轴中间(默认Y轴轴中间)
    MainAxisAlignment.spaceBetween  间距相同  首尾没有间距
    MainAxisAlignment.spaceAround子元素平均充满
    MainAxisAlignment.spaceEvenly间距相同 首尾有间距
    */
    MainAxisSize mainAxisSize = MainAxisSize.max,  //容器可占空间
    /*
    MainAxisSize.min容器空间需要根据内容的大小而撑开的时候用
	MainAxisSize.max则相反默认就是最大可占用的空间
    */
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,  //次轴的排序方式
    /*
    CrossAxisAlignment.start次轴的顶部(默认X轴上部)
    CrossAxisAlignment.end次轴的底部(默认X轴下部)
    CrossAxisAlignment.center次轴的中部(默认X轴中间)
    CrossAxisAlignment.stretch子元素宽充满
    */
    TextDirection textDirection,  //顺序
    /*
    TextDirection.ltr排列方式从左到右（X轴）
	TextDirection.ltr排列方式从右到左（X轴）
    */
    VerticalDirection verticalDirection = VerticalDirection.down,  //设置子Widget在纵轴（Y）的起始位置，down表示，第一个widget从开始位置展示，后面的跟着依次展示；相当于正序
    /*
     VerticalDirection.up//表示第一个widget从末尾位置开始展示，后面的跟着依次展示，相当于倒序
    */
    TextBaseline textBaseline,  //基线对齐方式配合CrossAxisAlignment.baseline一起使用
    List<Widget> children = const <Widget>[],
  })

二.常用方法

1.获取屏幕宽度

final size = MediaQuery.of(context).size;
final width = size.width;
final height = size.height; 

import 'dart:ui';

final width = window.physicalSize.width;
final height = window.physicalSize.height;