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.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,
  })

2.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一起使用
     /*
    TextBaseline.alphabetic 文本基线是标准的字母基线
    TextBaseline.ideographic 文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部
    */
    List<Widget> children = const <Widget>[],
  })

5.Text(文本)

const Text(
    String this.data, {
    Key? key,
    this.style,  //文字样式
    this.strutStyle,  //段落的间距样式
    this.textAlign,  //文字对齐方式
    /*
    TextAlign.center 将文本对齐容器的中心
    TextAlign.end 对齐容器后缘上的文本
    TextAlign.justify 拉伸以结束的文本行以填充容器的宽度。即使用了decorationStyle才起效
    TextAlign.left 对齐容器左边缘的文本
    TextAlign.right 对齐容器右边缘的文本
    TextAlign.start 对齐容器前缘上的文本
    */
    this.textDirection,  //文字排列方向
    /*
    TextDirection.ltr 左到右
    TextDirection.rtl 右到左
    */
    this.locale,  //选择区域特定字形的语言环境
    this.softWrap,  //某一行中文本过长，是否需要换行。默认为true，如果为false，则文本中的字形将被定位为好像存在无限的水平空间。
    this.overflow,  //如何处理视觉溢出
    /*
    TextOverflow.clip 剪切溢出的文本以修复其容器
    TextOverflow.ellipsis 使用省略号表示文本已溢出
    TextOverflow.fade 将溢出的文本淡化为透明
    */
    this.textScaleFactor,  //每个逻辑像素的字体像素数
    /*
    如果文本比例因子为1.5，则文本将比指定的字体大小大50％。
	作为textScaleFactor赋予构造函数的值。如果为null，将使用从	
	环境MediaQuery获取的MediaQueryData.textScaleFactor 即手
	机的像素密度（1.0、1.5、2.0、3.0）
    */
    this.maxLines,  //文本要跨越的可选最大行数
    /*
    为1，则文本不会换行。否则，文本将被包裹在框的边缘
    */
    this.semanticsLabel,  //图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
    this.textWidthBasis,  //一行或多行文本宽度的不同方式
    /*
    TextWidthBasis.parent 多行文本的将占用父类给出的全部宽度，针对一行文本只需要包含文本所需要的最小宽度，常见用例为段落
    TextWidthBasis.longestLine 宽度刚好可以容纳最长的行，比如聊天气泡
    */
    this.textHeightBehavior,  //定义如何应用第一行的ascent和最后一行的descent
  })

TextStyle({
    this.inherit = true,  //inherit设置为flase表示不继承从主题里面设置的一些文本样式
    this.color,  //文本颜色
    /*
    如果指定了foreground，则此值必须为null
    */
    this.backgroundColor,
    this.fontSize,  //字体大小(pt、sp)，默认为14个逻辑像素(14pt、14sp)
    this.fontWeight,  //绘制文本时使用的字体粗细
    /*
    FontWeight.bold 常用的字体重量比正常重。即w700
    FontWeight.normal 默认字体粗细。即w400
    FontWeight.w100 薄，最薄
    FontWeight.w200 特轻
    FontWeight.w300 轻
    FontWeight.w400 正常/普通
    FontWeight.w500 较粗
    FontWeight.w600 半粗体
    FontWeight.w700 加粗
    FontWeight.w800 特粗
    FontWeight.w900 最粗
    */
    this.fontStyle,  //字体变体
    /*
    FontStyle.italic 使用斜体
    FontStyle.normal 使用直立
    */
    this.letterSpacing,  //水平字母之间的空间间隔（逻辑像素为单位）。可以使用负值来让字母更接近。
    this.wordSpacing,  //单词之间添加的空间间隔（逻辑像素为单位）。可以使用负值来使单词更接近。
    this.textBaseline,  //对齐文本的水平线
    /*
    TextBaseline.alphabetic 文本基线是标准的字母基线
    TextBaseline.ideographic 文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部
    */
    this.height,  //文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2）
    this.leadingDistribution,
    this.locale,  //用于选择区域特定字形的语言环境
    this.foreground,  //文本的前景色，不能与color共同设置
    this.background,  //文本背景色
    this.shadows,  //设置文字阴影
    this.fontFeatures,
    this.decoration,  //绘制文本装饰
    /*
    TextDecoration.underline 下划线
    TextDecoration.overline 上划线
    TextDecoration.lineThrough 删除线
    TextDecoration.none 无
    */
    this.decorationColor,  //绘制文本装饰的颜色
    this.decorationStyle,  //绘制文本装饰的样式
    /*
    TextDecorationStyle.dashed 画一条虚线
    TextDecorationStyle.dotted 画一条虚线 
    TextDecorationStyle.double 画两条线
    TextDecorationStyle.solid 画一条实线 
    TextDecorationStyle.wavy 画一条正弦线(波浪线) 
    */
    this.decorationThickness,
    this.debugLabel,
    String? fontFamily,  //字体名称
    /*
    如果字体是在包中定义的，那么它将以'packages / package_name /'为前缀（例如'packages / cool_fonts / Roboto'）
    */
    List<String>? fontFamilyFallback,
    String? package,
    this.overflow,
  })

5.1)中文英文高度不一致

中文和英文字体默认的leading不一样。

StrutStyle的leading属性是指字体的倍数，比如：0.5就是0.5*字体的高度,而且这个高度要分成两半，上下各分一半。

 strutStyle: const StrutStyle(
    forceStrutHeight: true,
    leading: 0.5,
 )

6.Decoration(装饰)

6.1)BoxDecoration

  const BoxDecoration({
    this.color, // 底色
    this.image, // 图片
    this.border, 边色
    this.borderRadius, // 圆角度
    this.boxShadow, // 阴影
    this.gradient, // 渐变
    this.backgroundBlendMode, // 混合Mode
    this.shape = BoxShape.rectangle,  // 形状
  }) 

6.1.1 边框+圆角

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFF0000), width: 0.5), // 边色与边宽度
  color: Color(0xFF9E9E9E), // 底色
  //        borderRadius: new BorderRadius.circular((20.0)), // 圆角度
  borderRadius: new BorderRadius.vertical(top: Radius.elliptical(20, 50)), // 也可控件一边圆角大小
),

6.1.2 阴影

decoration: new BoxDecoration(
    border: new Border.all(color: Color(0xFFFF0000), width: 0.5), // 边色与边宽度
// 生成俩层阴影，一层绿，一层黄， 阴影位置由offset决定,阴影模糊层度由blurRadius大小决定（大就更透明更扩散），阴影模糊大小由spreadRadius决定
    boxShadow: [BoxShadow(color: Color(0x99FFFF00), offset: Offset(5.0, 5.0),    blurRadius: 10.0, spreadRadius: 2.0), BoxShadow(color: Color(0x9900FF00), offset: Offset(1.0, 1.0)), BoxShadow(color: Color(0xFF0000FF))],
),

6.1.3 形状（圆形与矩形）

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFFFF00), width: 0.5), // 边色与边宽度
  color: Color(0xFF9E9E9E), // 底色
  //        shape: BoxShape.circle, // 圆形，使用圆形时不可以使用borderRadius
  shape: BoxShape.rectangle, // 默认值也是矩形
  borderRadius: new BorderRadius.circular((20.0)), // 圆角度
),

6.1.4 渐变（环形、扫描式、线性）

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFFFF00), width: 0.5), // 边色与边宽度
// 环形渲染
  gradient: RadialGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],radius: 1, tileMode: TileMode.mirror)
//扫描式渐变
//        gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14)
// 线性渐变
//        gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 0), end: FractionalOffset(0, 1))
),

6.1.5 背景图像

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFFFF00), width: 0.5), // 边色与边宽度
  image: new DecorationImage(
  image: new NetworkImage('https://avatar.csdn.net/8/9/A/3_chenlove1.jpg'), // 网络图片
  // image: new AssetImage('graphics/background.png'), 本地图片
  fit: BoxFit.fill // 填满
  //          centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),// 固定大小
  ),
),

6.2) ShapeDecoration

const ShapeDecoration({
  this.color,
  this.image,
  this.gradient,
  this.shadows,
  @required this.shape,
})

除了shape，其他与BoxDecoration一致

6.2.1 shape

decoration: new ShapeDecoration(
  color: Color(0xFFFF00FF), // 底色
  // 统一四边颜色和宽度
  shape: Border.all(color: Color(0xFF00FFFF),style: BorderStyle.solid,width: 2)
// 四个边分别指定颜色和宽度， 当只给bottom时与UnderlineInputBorder一致效果
//          shape: Border(top: b, bottom: b, right: b, left: b)
// 底部线
//          shape: UnderlineInputBorder( borderSide:BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
// 矩形边色
//        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
// 圆形边色
//        shape: CircleBorder(side: BorderSide(color: Color(0xFFFFFF00), style: BorderStyle.solid, width: 2))
// 体育场（竖向椭圆）
//        shape: StadiumBorder(side: BorderSide(width: 2, style: BorderStyle.solid, color: Color(0xFF00FFFF))
// 角形（八边角）边色
//          shape: BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
),

6.3)FlutterLogoDecoration

展示一个FlutterLogo，实际用不上

const FlutterLogoDecoration({
  this.lightColor = const Color(0xFF42A5F5), // Colors.blue[400]
  this.darkColor = const Color(0xFF0D47A1), // Colors.blue[900]
  this.textColor = const Color(0xFF616161),
  this.style = FlutterLogoStyle.markOnly,
  this.margin = EdgeInsets.zero,
}) 

6.4)UnderlineTabindicator 下划线

decoration: new UnderlineTabIndicator(
  borderSide: BorderSide(width: 2.0, color: Colors.white),
  insets: EdgeInsets.fromLTRB(0,0,0,10) //控制下划高底，左右边距
)

7.Row(横向线性布局)

Row({
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, //管理主轴方向的富裕空间，相当于 css 中的 justify-content
    /*
    MainAxisAlignment.start 子 Widget 排列在主轴的起始端
    MainAxisAlignment.center 子 Widget 居中
    MainAxisAlignment.end 子 Widget 排列在主轴的末端
    MainAxisAlignment.spaceBetween 子 Widget 对齐起始和末端，其余空间平均分配
    MainAxisAlignment.spaceAround 富裕空间环绕分配 子 Widget
    MainAxisAlignemnt.spaceEvenly 富裕空间平均分配
    */
    MainAxisSize mainAxisSize = MainAxisSize.max, //表示 Row 在主轴方向占用的空间
    /*
    MainAxisSize.max  占用尽可能多的空间（默认值），相当于 CSS 块级元素的流动性
    MainAxisSize.min 宽度收缩到合适（宽度为子元素之和）
    */
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, //管理纵轴的富裕空间，Row 的高度等于子组件中最高的子元素高度
    /*
    CrossAxisAlignment.start 子 Widget 在纵轴的起始端
    CrossAxisAlignment.center 子 Widget 在纵轴居中，富裕空间上下平均分配
    CrossAxisAlignment.end 子 Widget 在纵轴的末端
    */
    TextDirection? textDirection, //表示主轴的方向
    /*
    TextDirection.ltr 从左往右（默认值）
    TextDirection.rtl 从右往左
    */
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline, //基线对齐方式配合CrossAxisAlignment.baseline一起使用
     /*
    TextBaseline.alphabetic 文本基线是标准的字母基线
    TextBaseline.ideographic 文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部
    */
    List<Widget> children = const <Widget>[], //一个 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;