flutter(一)——构造方法与属性 基础篇

本文是Flutter的基础教程,详细介绍了Flutter中Text、TextStyle、TextField、Image等Widget的构造方法和属性,包括从不同资源加载图片的方式。此外,还讲解了Layout Widget如Row、Column、Stack、Center等的使用,以及Alignment、MainAxisAlignment、CrossAxisAlignment等属性。最后,文中还讨论了GestureDetector如何处理手势交互,以及Button Widget如RaisedButton、FlatButton、OutlineButton、FloatingActionButton的使用和构造方法。
摘要由CSDN通过智能技术生成

Text Widget

const Text(this.data, {
     //Text显示的内容
Key key,
this.style, //Text显示的样式
this.textAlign,//文本应该如何水平对齐,TextAlign.start,end 或者center
this.textDirection, //文本方向,TextDirection.ltr\TextDirection.rtl
this.locale,
this.softWrap,  //是否自动换行,若为false,文字将不考虑容器大小,单行显示,超出屏幕部分将默认截断处理
this.overflow, //当文字超出屏幕的时候,如何处理,TextOverflow.clip(裁剪)\TextOverflow.fade(渐隐)\TextOverflow.ellipsis(省略号)
this.textScaleFactor, //字体显示倍率,上面的例子使用的字体大小是20.0,将字体设置成10.0,然后倍率为2
this.maxLines, //最大行数设置
this.semanticsLabel,
})

TextStyle

const TextStyle({
   
    this.inherit: true,         // 为false的时候不显示
    this.color,                    // 颜色 
    this.fontSize,               // 字号
    this.fontWeight,           // 字重,加粗也用这个字段  FontWeight.w700
    this.fontStyle,                // FontStyle.normal  FontStyle.italic斜体
    this.letterSpacing,        // 字符间距  就是单个字母或者汉字之间的间隔,可以是负数
    this.wordSpacing,        // 字间距 句字之间的间距
    this.textBaseline,        // 基线,两个值,字面意思是一个用来排字母的,一人用来排表意字的(类似中文)
    this.height,                // 当用来Text控件上时,行高(会乘以fontSize,所以不以设置过大)
    this.decoration,        // 添加上划线,下划线,删除线 
    this.decorationColor,    // 划线的颜色
    this.decorationStyle,    // 这个style可能控制画实线,虚线,两条线,点, 波浪线等
    this.debugLabel,
    String fontFamily,    // 字体
    String package,
  })

Widget TextField

const TextField({
   
    Key key,
    this.controller,           控制器,控制TextField文字
    this.focusNode,
    this.decoration = const InputDecoration(),    //输入器装饰
    TextInputType keyboardType,   输入的类型
    this.textInputAction,
    this.textCapitalization = TextCapitalization.none,
    this.style,
    this.textAlign = TextAlign.start,   //文字显示位置
    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),
  })

Widget—Image
Flutter加载不同资源图片的方式:
new Image, 用于从ImageProvider获取图像。
new Image.asset, 用于从AssetBundle获取图像。
new Image.network, 用于从URL获取图像。
new Image.file, 用于从文件中获取图像。
new Image.memory, 用于从内存中获取图像

在flutter中Image支持JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, 和 WBMP这几种图片格式。

Image.network(String src, {
   
    Key key,
    double scale: 1.0,//缩小倍数
    this.width,//宽
    this.height,//高
    this.color,
    this.colorBlendMode,
    this.fit, //填充方式
    this.alignment: Alignment
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值