文本及样式
child: Column(
children: [
//文本的对齐方式
Text("文本的对齐方式"*6,textAlign: TextAlign.right,),//right\start\end\justify\center
//文本溢出显示
Text('文本溢出显示'*9,maxLines: 1,overflow: TextOverflow.ellipsis,),//
//字体大小的缩放
Text('字体大小的缩放',textScaleFactor: 1.5,),
//字体的样式TextStyle
Text('字体的样式TextStyle',
style: TextStyle(
color: Colors.red,
fontSize: 18.0,//大小
fontWeight: FontWeight.bold,//加粗
letterSpacing: 5,//字间隔
wordSpacing: 10,//词间隔
height: 1.2,//行高
fontFamily: 'Courier',
//backgroundColor: Colors.black12,//背景颜色
background: Paint()..color = Colors.black12,//背景颜色
decoration: TextDecoration.underline,//文字线,删除线
decorationStyle: TextDecorationStyle.solid,//文字线虚线实线
decorationColor: Colors.amber,//文字线颜色
decorationThickness:1,//文字线高度
shadows: const <Shadow> [//阴影
Shadow(offset: Offset(10.0,10.0),blurRadius: 3.0,color: Color.fromARGB(255, 0, 0, 0)),
Shadow(offset: Offset(10.0,10.0),blurRadius: 8.0,color: Color.fromARGB(125, 0, 0, 255)),
],
),
//文本片段TextSpan
const Text.rich(TextSpan(
children: [
TextSpan(text: 'Home:'),
TextSpan(
text: "https://flutterchina.club",
style: TextStyle(
color: Colors.blue
),
)
]
))
),
],
),
按钮
ElevatedButton
ElevatedButton 即"漂浮"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大。
ElevatedButton(
onPressed: (){},//点击
onLongPress: (){},//长按
onFocusChange: (bool b){print(b);},//焦点变化
onHover: (bool c){print(c);},//鼠标悬停
autofocus: false,//是否自动获取焦点
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,//背景色
foregroundColor: Colors.red,//按钮字体颜色和波纹颜色
shadowColor: Colors.greenAccent,//阴影颜色
surfaceTintColor: Colors.black,
padding: EdgeInsets.all(20.0),//按钮内边距
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25) //圆角弧度
),
minimumSize: const Size(64, 40),//按钮最小
),
child: const Text('漂浮按钮'),
)
TextButton
TextButton即文本按钮，默认背景透明并不带阴影。按下后，会有背景色
。
TextButton(
onPressed: (){},//点击
onLongPress: (){},//长按
onFocusChange: (bool b){print(b);},//焦点变化
onHover: (bool c){print(c);},//鼠标悬停
autofocus: false,//是否自动获取焦点
style:TextButton.styleFrom(
//...
) ,
child: const Text('文本按钮')
)
OutlineButton
OutlineButton默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)
OutlinedButton(
onPressed: (){},//点击
onLongPress: (){},//长按
onFocusChange: (bool b){print(b);},//焦点变化
onHover: (bool c){print(c);},//鼠标悬停
autofocus: false,//是否自动获取焦点
style: OutlinedButton.styleFrom(
//同上
),
child: const Text('边框按钮')
),
IconButton
IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景。
IconButton(
onPressed: (){},
icon: const Icon(Icons.ac_unit),//图标
iconSize: 30,//图标大小
color: Colors.red,//图标红色
disabledColor: Colors.black,//icon 不可点击颜色，onPressed == null 时生效
splashColor: Colors.yellow,//点击时闪过的颜色
highlightColor: Colors.green,//按下去高亮的颜色
padding: const EdgeInsets.all(80),//padding 不设置时，默认为 8.0
)
- 带图标的按钮
ElevatedButton、TextButton、OutlineButton都有一个icon 构造函数，通过它可以轻松创建带图标的按钮。
ElevatedButton.icon(
icon: const Icon(Icons.send),
label: const Text("发送"),
onPressed: (){},
),
OutlinedButton.icon(
icon: Icon(Icons.add),
label: Text("添加"),
onPressed: (){},
),
TextButton.icon(
icon: const Icon(Icons.info),
label: const Text("详情"),
onPressed: (){},
),
图片及ICON
Image
Image widget 有一个必选的image参数，它对应一个 ImageProvider。下面我们分别演示一下如何从 asset 和网络加载图片。
- 从asset中加载图片
在工程根目录下创建一个images目录，并将图片 avatar.jpg 拷贝到该目录,在pubspec.yaml中的flutter部分添加：
# 图片资源配置
assets:
- images/avatar.jpg
然后加载图片
Image(
image: AssetImage('images/avatar.jpg'),
width: 100,
height: 100,
semanticLabel: '头像图片',//图片描述
color: Colors.red,//图片前景颜色,会覆盖图片，一般会和colorBlendMode结合使用
colorBlendMode: BlendMode.colorDodge,//一般和color结合使用，设置color的混合模式
fit: BoxFit.fill,//设置图片的显示模式
alignment: Alignment.center,//设置图片的对齐方式
repeat: ImageRepeat.noRepeat,//图片的重复方式
),
//Image也提供了一个快捷的构造函数Image.asset用于从asset中加载、显示图片
Image.asset('images/avatar.jpg',
width: 150,
height: 150,
semanticLabel: '头像图片',//图片描述
color: Colors.red,//图片前景颜色,会覆盖图片，一般会和colorBlendMode结合使用
colorBlendMode: BlendMode.colorDodge,//一般和color结合使用，设置color的混合模式
fit: BoxFit.fill,//设置图片的显示模式
alignment: Alignment.center,//设置图片的对齐方式
repeat: ImageRepeat.noRepeat,//图片的重复方式
)
- 从网络加载图片
Image.network(
'https://cdn.tehub.comuploads/9x1MQZaDYV/u/avatar/de74a650-45fa-4495-86fb-967fc91766de.jpg?imageView2/1/w/40/h/40/q/100',
width: 150,
height: 150,
scale: 1,//缩放
//同上属性
),
//Image也提供了一个快捷的构造函数Image.network用于从网络加载、显示图片
Image.network(
'https://cdn.tehub.comuploads/9x1MQZaDYV/u/avatar/de74a650-45fa-4495-86fb-967fc91766de.jpg?imageView2/1/w/40/h/40/q/100',
width: 250,
height: 250,
//同上属性
)
重点：
fit：该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。适应模式是在BoxFit中定义，它是一个枚举类型，有如下值：
- fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
- cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
- contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
- fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
- fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
- none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。
ICON
相对于Image，ICON可以像web一样使用字体图标，并且可以使用矢量图，无需担心失真的问题，并且体积相对较小。其构造简单:
const Icon(
this.icon, {
super.key,
this.size,
this.color,
this.semanticLabel,
this.textDirection,
this.shadows,
});
Flutter默认包含了一套Material Design的字体图标，在pubspec.yaml文件中的配置如下:
flutter:
uses-material-design: true
//列子
const Icon(
Icons.ac_unit,
color: Colors.green,//图标颜色
size: 40,//图标大小
semanticLabel: '图标描述',//图标描述
textDirection: TextDirection.rtl,//Icon组件里也可以添加文本内容,有些文本书写的方向是从左到右 Text-Direction.ltr / 反rtl
shadows: [ //阴影
Shadow(
offset: Offset(2.0, 2.0),
blurRadius: 3.0,
color: Color.fromARGB(255, 0, 0, 0),
),
Shadow(
offset: Offset(2.0, 2.0),
blurRadius: 8.0,
color: Color.fromARGB(125, 0, 0, 255),
),
],
)
使用自定义字体图标
导入字体图标文件；这一步和导入字体文件相同，假设我们的字体图标文件保存在项目根目录下，路径为"fonts/iconfont.ttf"：
fonts:
- family: myIcon #指定一个字体名
fonts:
- asset: fonts/iconfont.ttf
为了使用方便，我们定义一个MyIcons类，功能和Icons类一样：将字体文件中的所有图标都定义成静态变量：
//自定义图标
class MyIcons{
static const IconData book = IconData(
0xe614,
fontFamily: 'myIcon',
matchTextDirection: true
);
static const IconData wechat = IconData(
0xec7d,
fontFamily: 'myIcon',
matchTextDirection: true
);
}
使用：
const Icon(MyIcons.book,color: Colors.purple),