最近看Dart，发现很多地方用了const，然后就去查了下Flutter里的const。
const 声明的变量是在编译时确定的，永远不会改变。也就是说编译器提前就知道了该如何存储这个变量的值。对于 const 声明的变量可以自动推断变量的类型。
final 声明的变量也是不可更改的。这里有个区别在于final 声明的变量允许声明后再赋值，赋值后不可改变。比如我们声明 final 类型的变量时，可以先不赋值，甚至可以通过构造函数来初始化。
final int a;
a = 1;
// 构造方法
class FinalDemo {
final name;
FinalDemo({required this.name});
}
这说明 final 声明的变量是在运行时确定的。
实际上，声明为 const 时就是告诉编译器，这个变量在整个代码的生命周期中都不会改变，因此只需要给这个变量创建一个副本，其他任何地方使用这个变量的时候都指向该副本，而不是创建一个新对象。Flutter 不会重建构建 const 组件。
遵循一个原则 —— 尽可能地将组件的属性声明为 final ，构造方法声明为const，并且使用 const 使用这样的组件对象。
下面来写今天的demo
import 'package:flutter/material.dart';
class MyButton extends StatelessWidget {
const MyButton({super.key});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print("button tapped");
},
child: Container(
height: 50,
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Colors.lightGreen[500],
),
child: const Center(
child: Text('这是一个自定义按钮'),
),
),
);
}
}
这里新创建一个文件，自定义一个button。
在上一篇的demo里把body替换成这个样子
body: const Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Hello world'),
MyButton(),
],
)
),
效果图
其中
Row可以换成Column, Column为上下排列。
可以再加一个TextField，TextField里的属性如下
const TextField({
Key key,
this.controller,//控制器
this.focusNode,//焦点
this.obscureText = false,//是否隐藏文本，即显示密码类型
this.maxLines = 1,//最多行数，高度与行数同步
this.autofocus = false,//自动聚焦
this.decoration = const InputDecoration(),//装饰
TextInputType keyboardType,//键盘类型，即输入类型
this.onChanged,//输入改变回调
//以下属性不常用,用到再来查看
this.textInputAction,//键盘按钮
this.textCapitalization = TextCapitalization.none,//大小写
this.style,//样式
this.strutStyle,
this.textAlign = TextAlign.start,//对齐方式
this.textDirection,
this.autocorrect = true,//自动更正
this.minLines,//最小行数
this.expands = false,
this.maxLength,//最多输入数，有值后右下角就会有一个计数器
this.maxLengthEnforced = true,
this.onEditingComplete,//输入完成时，配合TextInputAction.done使用
this.onSubmitted,//提交时,配合TextInputAction
this.inputFormatters,//输入校验
this.enabled,//是否可用
this.cursorWidth = 2.0,//光标宽度
this.cursorRadius,//光标圆角
this.cursorColor,//光标颜色
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
this.dragStartBehavior = DragStartBehavior.start,
this.enableInteractiveSelection,
this.onTap,//点击事件
this.buildCounter,
this.scrollPhysics,
})
明天详细研究下TextField控件的用法。
参考链接： https://www.jianshu.com/p/d4ea99eae8cd
https://www.jianshu.com/p/8bac3d2a4e63/
