Flutter笔记_摇耳朵的小布丁i

大大的周 02-07 5168

文章目录一.组件1.Container(容器)1.1）圆角边框 2.TextField(输入框)2.1）圆角边框 3.Wrap(流式布局)4.Column(纵向线性布局)5.Text(文本)6.Decoration(装饰)6.1)BoxDecoration6.1.1 边框+圆角6.1.2 阴影6.1.3 形状（圆形与矩形）6.1.4 渐变（环形、扫描式、线性）6.1.5 背景图像 6.2) ShapeDecoration6.2.1 shape 6.3)FlutterLogoDecoration6.4)UnderlineTabindicator 下划线二.常用方法1.获取屏幕宽度

一.组件 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一起使用 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, }) 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) //控制下划高底，左右边距 ) 二.常用方法 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;