今天我们总结下Flutter
常用的基础组件,方便以后随时查阅
Text
Text
用于显示简单样式文本,它包含一些控制文本显示样式的一些属性.
Text("预览",
style: TextStyle (
color: Colors.black87
),
),
const Text(
final String data;//要显示的文本。
final InlineSpan textSpan; // 文本内容 Text.rich()
final TextStyle style;//文本的样式
final StrutStyle strutStyle; 段落样式
final TextAlign textAlign; // 对齐方式
final TextDirection textDirection; // 文本的方向
final Locale locale;// 选择区域特定字形的语言环境
final bool softWrap; // 是否自动换行
final TextOverflow overflow;// 如何处理文本溢出
final double textScaleFactor;//每个逻辑像素的字体像素数
final int maxLines; // 文本可跨越的可选最大行数,必要时可以换行。
final String semanticsLabel;// 此文本的替代语义标签
})
TextStyle
TextStyle
用于指定文本显示的样式如颜色、字体、粗细、背景
等
TextStyle (
color: Colors.black87
),
TextStyle({
final bool inherit; // 空值是否用祖先文本中的值替换
final Color? color; // 绘画文字时使用的颜色
final Color? backgroundColor; // 用作文本背景的颜色
final String? fontFamily; //绘制文本时使用的字体名称(例如Roboto)。
final String? _package; // 存储此文件是为了在_fontFamilyFallback中为fontFamilies加上前缀
final double? fontSize; // 字体大小
static const double _defaultFontSize = 14.0;//如果未指定默认字体大小
final FontWeight? fontWeight;// 绘画文本时要使用的字体粗细(例如,粗体)。
final FontStyle? fontStyle;// 绘制字母时要使用的字体变体(例如,斜体)
final double? letterSpacing;// 每个字母之间要增加的空间量(以逻辑像素为单位)
final double? wordSpacing;// 单词之间的间隔
//应该在此文本范围与其父文本范围之间对齐的通用基线,或者对于根文本范围,应使用行框对齐。
final TextBaseline? textBaseline;
final double? height; // 此文本跨度的高度,是字体大小的倍数。
final Locale? locale;// 用于选择区域特定字形的语言环境
final Paint? foreground; // 作为文本前景绘制的绘画
final Paint? background;//作为文本背景绘制的颜色
final TextDecoration? decoration;// 他的装饰物会在文字附近绘制(例如,下划线)
final Color? decorationColor;// 绘制文字装饰的颜色.
final TextDecorationStyle? decorationStyle;// 绘制文字装饰的样式(例如,虚线)。
final double? decorationThickness;//装饰笔画的粗细乘以字体定义的粗细
final String? debugLabel; // 这种文本样式的可读描述。
})
height
:该属性用于指定行高,但它并不是一个绝对值,而是一个因子,具体的行高等于fontSize*height
。fontFamily
:由于不同平台默认支持的字体集不同,所以在手动指定字体时一定要先在不同平台测试一下。fontSize
:该属性和Text
的textScaleFactor
都用于控制字体大小。但是有两个主要区别:fontSize
可以精确
指定字体大小,而textScaleFactor
只能通过缩放比例
来控制。textScaleFactor
主要是用于系统字体大小设置改变时对Flutter
应用字体进行全局调整,而fontSize
通常用于单个文本,字体大小不会跟随系统字体大小变化。
TextSpan
Text
的所有文本内容只能按同一种样式,如果我们需要对一个Text
内容的不同部分按照不同的样式显示,这时就可以使用TextSpan
,它代表文本的一个片段
。我们看看TextSpan
的定义
const TextSpan({
TextStyle style, // 文本的样式
Sting text,// 文本内容
List<TextSpan> children,// 包含的其他片段
GestureRecognizer recognizer,// 手势识别器,将接收达到此范围的事件。
});
比如我们实现个带有链接的文本:
Text.rich(
TextSpan(
children: [
TextSpan(
text: "参考链接:"
),
TextSpan(
text:"https://baidu.com",
style: TextStyle(
color: Colors.blue,
),
recognizer: _tapRecognizer, //点击手势
),
]
)
),
DefaultTextStyle
DefaultTextStyle
用于设置默认文本样式的.
在
Widget
树中,文本的样式
默认是可以被继承
的(子类文本类组件未指定具体样式时可以使用Widget
树中父级设置的默认样式),
因此,如果在Widget树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式.
DefaultTextStyle({
final TextStyle style; // 文本样式
final TextAlign textAlign; // 对齐方式
final bool softWrap; // 是否自动换行
final TextOverflow overflow;// 如何处理溢出操作
final int maxLines;// 文本可跨越的可选最大行数,必要时可以换行。
final TextWidthBasis textWidthBasis;// 计算文本宽度时使用的策略
})
我们看一个例子:
DefaultTextStyle(
// 创建个默认的字体样式
style: TextStyle(
color: Colors.red,
fontSize: 16.0
),
child: Column(
children: [
Text("中国邮政"),
Text("Hello world!"),
Text(
"Hello world!",
style: TextStyle( // 子视图自定义自己的样式
color: Colors.blue,
fontSize: 12.0
),
)
],
),
)
前两个文本没有自定义样式,就会使用父类的默认样式,最后一个文本自定义了样式,就会使用自己的样式
按钮类
Material
组件库中提供了多种按钮组件如RaisedButton
、FlatButton
、OutlineButton
等,它们都是直接或间接对RawMaterialButton
组件的包装定制.他们都继承于 MaterialButton
FlatButton
FlatButton
即扁平按钮,默认背景透明并不带阴影。按下后,会有背景色
FlatButton(
child: Text("normal"),
onPressed: () {},
)
class FlatButton extends MaterialButton {
const FlatButton({
Key key
@required VoidCallback onPressed, //点击事件
VoidCallback onLongPress,// 长按事件
Color textColor, // 按钮文字颜色
Color disabledTextColor,//按钮禁用时的文字颜色
Color highlightColor, // 点击时,水波动画中水波的颜色
Brightness colorBrightness,// 按钮主题,默认浅色主题
EdgeInsetsGeometry padding,// 按钮的填充
VisualDensity visualDensity,
ShapeBorder shape,// 外形
})
}
官方API: FlatButton-class
RaisedButton
RaisedButton
即"漂浮"按钮,它默认带有阴影和灰色背景。按下后,阴影会变大.
RaisedButton(
child: Text("normal"),
onPressed: () {},
);
RaisedButton(
@required VoidCallback onPressed; //点击或以其他方式激活按钮时调用的回调
ValueChanged<bool> onHighlightChanged; //由底层InkWell小部件的InkWell.onHighlightChanged 回调调用
ButtonTextTheme textTheme; //文本主题
Color textColor; //文本颜色
Color disabledTextColor; //按钮不可用时的文本颜色
Color color; //按钮颜色
Color disabledColor; //按钮不可用时的颜色
Color highlightColor; //按钮按下时的颜色
Color splashColor; //点击后扩散动画的颜色
Brightness colorBrightness; //用于此按钮的主题亮度
double elevation; //凸出的高度
double highlightElevation; //按下按钮时凸出的高度
double disabledElevation; //按钮不可用时凸出的高度
EdgeInsetsGeometry padding; //内边距
ShapeBorder shape; //按钮材质的形状
Clip clipBehavior: Clip.none; //剪裁
MaterialTapTargetSize materialTapTargetSize; //配置点击目标的最小尺寸
Duration animationDuration; //动画的持续时间
Widget child; //子控件(RaisedButton())
Widget icon; //图标(RaisedButton.icon())
Widget label;//文本(RaisedButton.icon())
)
官方API: RaisedButton
OutlineButton
OutlineButton
默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和阴影(较弱)
OutlineButton(
child: Text("normal"),
onPressed: () {},
)
OutlineButton(
// 部分属性
@required VoidCallback onPressed; //点击或以其他方式激活按钮时调用的回调
ValueChanged<bool> onHighlightChanged; //由底层InkWell小部件的InkWell.onHighlightChanged 回调调用
MouseCursor mouseCursor,// 鼠标指针进入或悬停在按钮上时的光标。
ButtonTextTheme textTheme; //文本主题
Color textColor; //文本颜色
Color disabledTextColor; //按钮不可用时的文本颜色
Color color; //按钮颜色
)
官方API: OutlineButton
IconButton
IconButton
是一个可点击的Icon
,不包括文字,默认没有背景,点击后会出现背景
IconButton(
icon: Icon(Icons.thumb_up),
onPressed: () {},
)
IconButton(
double iconSize: 24.0;//图标尺寸
EdgeInsetsGeometry padding: const EdgeInsets.all(8.0);//内边距
AlignmentGeometry alignment: Alignment.center;//对齐方式
Widget icon;//图标控件
Color color;//颜色
Color highlightColor;//按钮按下时的颜色
Color splashColor;//点击后扩散动画的颜色
Color disabledColor;//按钮不可用时的颜色
VoidCallback onPressed;//点击或以其他方式激活按钮时调用的回调
String tooltip;//描述按下按钮时将发生的操作的文本
)
官方API: IconButton
带图标按钮
RaisedButton
、FlatButton
、OutlineButton
都有一个icon 构造函数
,通过它可以轻松创建带图标的按钮
以RaisedButton
为例:
RaisedButton.icon(
icon: Icon(Icons.send),
label: Text("发送"),
onPressed: _onPressed,
)
自定义外观按钮
RaisedButton
、FlatButton
里面有个shape
属性,我们可以设置shape
去自定义我们想要的外观,以FlatButton
为例:
FlatButton(
color: Colors.blue,
highlightColor: Colors.blue[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
child: Text("Submit"),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
onPressed: () {},
)
Image
可以通过Image
组件来加载并显示图片,Image
的数据源可以是asset
、文件
、内存
以及网络
Image(
ImageProvider<dynamic> image; //要显示的图像(Image())
String name, //图片路径(Image.asset())
AssetBundle bundle, //图片资源(Image.asset())
File file; //文件路径(Image.file())
String src; //图片地址url(Image.network())
Uint8List bytes Uint8List; //获取的ImageStream,如sdk中从网络转Uint8List(Image.memory())
String semanticLabel; //图像的语义描述
bool excludeFromSemantics; //是否从语义中排除此图像,默认false
double scale; //比例
double width; //宽度
double height; //高度
Color color; //颜色,如果不为null,则通过colorBlendMode属性将此颜色与图像混合
BlendMode colorBlendMode; //混合模式
BoxFit fit; //图像的显示模式
AlignmentGeometry alignment; //对齐方式,默认Alignment.center
ImageRepeat repeat; //重复方式,默认ImageRepeat.noRepeat
Rect centerSlice; //九宫格拉伸
bool matchTextDirection; //是否以文本方向绘制图片,默认false
bool gaplessPlayback; //当图像更改时,是继续显示旧图像(true)还是简单地显示任何内容(false),默认false
FilterQuality filterQuality; //筛选质量,默认FilterQuality.low
String package, //包名(Image.asset())
Map<String, String> headers; //参数可用于通过图像请求发送自定义HTTP标头(Image.network())
)
官方API: Image
- 从
asset
中加载图片
Image(
image: AssetImage("images/avatar.png"),
width: 100.0
);
// 使用快捷的 asset 构造函数加载
Image.asset("images/avatar.png",
width: 100.0,
)
- 从
网络
中加载图片
Image(
image: NetworkImage(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
width: 100.0,
)
//使用快捷的构造函数Image.network 去加载
Image.network(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
width: 100.0,
)
BoxFit fit
:该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。适应模式是在BoxFit
中定义,它是一个枚举类型,有如下值:
fill
:会拉伸填充满显示空间,图片本身长宽比会发生变化,图片会变形。cover
:会按图片的长宽比放大后居中填满显示空间,图片不会变形,超出显示空间部分会被剪裁。contain
:这是图片的默认适应规则,图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间,图片不会变形。fitWidth
:图片的宽度会缩放到显示空间的宽度,高度会按比例缩放,然后居中显示,图片不会变形,超出显示空间部分会被剪裁。fitHeight
:图片的高度会缩放到显示空间的高度,宽度会按比例缩放,然后居中显示,图片不会变形,超出显示空间部分会被剪裁。
-none
:图片没有适应策略,会在显示空间内显示图片,如果图片比显示空间大,则显示空间只会显示图片中间部分。scaleDown
: 在目标框中对齐源(默认情况下,居中),如有必要,将源向下缩放,以确保源适合该框
Icon
Icon
来专门显示字体图标
Icon(
IconData icon;//系统库中的图标文件
double size;//图标的尺寸
Color color;//绘制图标时使用的颜色
String semanticLabel;//图标的语义标签
TextDirection textDirection;//用于渲染图标的文本方向
)
使用例子:
Icon(Icons.fingerprint,color: Colors.green,)
Icons
类中包含了所有Material Design
图标的IconData
静态变量定义。
字体图标 iconfont
: 它是将图标做成字体文件,然后通过指定不同的字符而显示不同的图片
在字体文件中,每一个字符都对应一个位码,而每一个位码对应一个显示字形,不同的字体就是指字形不同,即字符对应的字形是不同的。而在iconfont中,只是将位码对应的字形做成了图标,所以不同的字符最终就会渲染成不同的图标
字体图标的使用方法:
String icons = " \uE90D";
Text(icons,
style: TextStyle(
fontFamily: "MaterialIcons",
fontSize: 24.0,
color: Colors.green
),
);
这样写很是不方便,所以Flutter
把字体图标
封装成了Icon
,方便了开发者去调用
官方图标库:material-icons
官方API:Icon-class
DecorationImage
DecorationImage
装饰图片主要配合BoxDecoraion
使用,相当于给容器加背景.
DecorationImage (
// 需要装饰的图片
final ImageProvider image;
// 加载时的错误回调
final ImageErrorListener? onError;
// 在绘画之前将彩色滤镜应用于图像
final ColorFilter? colorFilter;
// 填充方式
final BoxFit? fit;
/// 图片的对齐方式.
final AlignmentGeometry alignment;
//中心切片
final Rect? centerSlice;
// 平铺方式
final ImageRepeat repeat;
// 是否沿[TextDirection]方向绘制图像。
final bool matchTextDirection;
// 定义每个逻辑像素要显示的图像像素
// 缩放倍数
final double scale;
)
decoration: BoxDecoration(
color: Colors.blue,
image: DecorationImage(
image: ExactAssetImage('images/pic0.jpg'),
fit: BoxFit.fill,
alignment: Alignment.topCenter,
repeat: ImageRepeat.repeatY,
),
),
DecorationImage
尽量结合ExactAssetImage
去加载图片,如果使用AssetImage
可能会加载不出来
官网API: DecorationImage
Switch
单选开关Switch
,继承自StatefulWidget
,但它本身不会保存当前选中状态,选中状态都是由父组件来管理的.
class Switch extends StatefulWidget {
// 切换按钮的值 不能为空
final bool value;
// 开关变化时候的回调
final ValueChanged<bool> onChanged;
//激活时原点颜色
final Color activeColor;
//激活时横条的颜色
final Color activeTrackColor;
//非激活时原点的颜色
final Color inactiveThumbColor;
//非激活时横条的颜色
final Color inactiveTrackColor;
//激活原点的图片效果
final ImageProvider activeThumbImage;
// 非激活原点的图片效果
final ImageProvider inactiveThumbImage;
//加载时发出的错误的可选错误回调
final ImageErrorListener onInactiveThumbImageError;
// 配置点击目标的最小大小
final MaterialTapTargetSize materialTapTargetSize;
// 鼠标指针进入或悬停在小部件上时的光标
final MouseCursor mouseCursor;
//具有输入焦点的按钮[材料]的颜色
final Color focusColor;
// 指针悬停在按钮[材料]上时的颜色
final Color hoverColor;
}
new Switch(
value: this.check,
activeColor: Colors.blue,
activeThumbImage: ImageProvider,
activeTrackColor: Colors.blue,
onChanged: (bool val) {
this.setState(() {
this.check = !this.check;
});
},
)
官方API: Switch
Checkbox
复选框Checkbox
,继承自StatefulWidget
,但它本身不会保存当前选中状态,选中状态都是由父组件来管理的.
new Checkbox(
value: this.check,
tristate: true, // 如果为 true,那么复选框的值可以是 true,false 或 null。
autofocus: true, // 当前作用域中的初始焦点
activeColor: Colors.blue, // 激活时的颜色
focusColor: Colors.blue, // 聚焦时的颜色
checkColor: Colors.blue, // 选中图标的颜色
hoverColor: Colors.blue, // hover时的颜色
materialTapTargetSize: MaterialTapTargetSize.padded // 配置tap目标的最小大小, 点击区域尺寸,padded:向四周扩展48px区域 shrinkWrap:控件区域
focusNode: focusNode,
onChanged: (bool val) {
this.setState(() {
this.check = !this.check;
});
},
),
官网AP:Checkbox
TextField
输入框TextField
,用于文本输入.
// 部分关键属性
const TextField({
...
// 编辑框的控制器,通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。
// 大多数情况下我们都需要显式提供一个controller来与文本框交互。如果没有提供controller,则TextField内部会自动创建一个。
TextEditingController controller,
// 用于控制TextField是否占有当前键盘的输入焦点。它是我们和键盘交互的一个句柄(handle)
FocusNode focusNode,
//用于控制TextField的外观显示,如提示文本、背景颜色、边框等。
InputDecoration decoration = const InputDecoration(),
// 用于设置该输入框默认的键盘输入类型
TextInputType keyboardType,
// 键盘动作按钮图标(即回车键位图标)
TextInputAction textInputAction,
// 正在编辑的文本样式
TextStyle style,
// 输入框内编辑文本在水平方向的对齐方式
TextAlign textAlign = TextAlign.start,
// 是否自动获取焦点
bool autofocus = false,
// 是否隐藏正在编辑的文本,如用于输入密码的场景等,文本内容会用“•”替换
bool obscureText = false,
// 输入框的最大行数,默认为1;如果为null,则无行数限制。
int maxLines = 1,
// maxLength代表输入框文本的最大长度,设置后输入框右下角会显示输入的文本计数
int maxLength,
// maxLengthEnforced决定当输入文本长度超过maxLength时是否阻止输入,为true时会阻止输入,为false时不会阻止输入但输入框会变红
bool maxLengthEnforced = true,
// 输入框内容改变时的回调函数;注:内容改变事件也可以通过controller来监听
ValueChanged<String> onChanged,
// 在输入框输入完成时触发,不接收参数
VoidCallback onEditingComplete,
// 在输入框输入完成时触发,接收当前输入内容做为参数
ValueChanged<String> onSubmitted,
// 用于指定输入格式;当用户输入内容改变时,会根据指定的格式来校验
List<TextInputFormatter> inputFormatters,
// 输入框是否会禁用
bool enabled,
// 光标的宽度,默认2.0
double cursorWidth;
// 光标的圆角度
Radius cursorRadius;
// 光标颜色
Color cursorColor;
// 键盘的外观
Brightness keyboardAppearance;
// 此值控制在滚动后TextField将位于Scrollable边缘的距离,默认EdgeInsets.all(20.0)
EdgeInsets scrollPadding;
// 确定处理拖动开始行为的方式,默认DragStartBehavior.start
DragStartBehavior dragStartBehavior;
// 如果为true,则长按此TextField将显示剪切/复制/粘贴菜单,并且点击将移动文本插入符号
bool enableInteractiveSelection;
// 当用户点击此文本字段时调用
GestureTapCallback onTap;
// 生成自定义InputDecorator.counter小部件的回调
InputCounterWidgetBuilder buildCounter;
// 确定Scrollable小部件的物理特性
ScrollPhysics scrollPhysics;
})
TextField(
decoration: InputDecoration(
labelText: "密码",
hintText: "您的登录密码",
prefixIcon: Icon(Icons.lock)
),
obscureText: true,
),
官网API: TextField
LinearProgressIndicator
LinearProgressIndicator
,Material
组件库中提供了的一个线性、条状的进度条
LinearProgressIndicator({
// 0~1的浮点数,用来表示进度多少;如果 value 为 null 或空,则显示一个动画,否则显示一个定值
double value,
// 背景颜色
Color backgroundColor,
// animation类型的参数,用来设定进度值的颜色,默认为主题色
// 该值类型是Animation<Color>,这允许我们对进度条的颜色也可以指定动画
Animation<Color> valueColor,
...
})
// 模糊进度条(会执行一个动画)
LinearProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
),
//进度条显示50%
LinearProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
value: .5,
)
第一个进度条在执行循环动画:蓝色条一直在移动,而第二个进度条是静止的,停在50%的位置
官方API: LinearProgressIndicator
CircularProgressIndicator
CircularProgressIndicator
,Material
组件库中提供了的一个圆形进度条
const CircularProgressIndicator({
// 0~1的浮点数,用来表示进度多少;如果 value 为 null 或空,则显示一个动画,否则显示一个定值
double value ,
// 背景颜色
Color backgroundColor,
//animation类型的参数,用来设定进度值的颜色,默认为主题色
Animation<Color> valueColor,
//进度条宽度
this.strokeWidth = 4.0,
String semanticsLabel,
String semanticsValue,
})
// 模糊进度条(会执行一个旋转动画)
CircularProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
),
//进度条显示50%,会显示一个半圆
CircularProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
value: .5,
),
第一个进度条会执行旋转动画,而第二个进度条是静止的,它停在50%的位置
自定义尺寸
:
LinearProgressIndicator
和CircularProgressIndicator
都是取父容器的尺寸作为绘制的边界的。知道了这点,我们便可以通过尺寸限制类Widget
,如ConstrainedBox
、SizedBox
(我们将在后面容器类组件一章中介绍)来指定尺寸- 如果
CircularProgressIndicator
显示空间的宽高不同
,则会显示为椭圆