最近又系统的学习完了一遍flutter，简单记录记录，感觉越敲越带劲。
基础组件
Text
const Text(
///显示的内容
String this.data, {
Key? key,
///样式，即字体/大小等等
this.style,
/// 段落的间距样式
this.strutStyle,
///文本对齐方式
this.textAlign,
/// 文字排列方向 ltr 左到右，rtl右到左
this.textDirection,
///语言环境
this.locale,
///是否自动换行
this.softWrap,
///文字超出屏幕之后的处理方式 clip：剪切，ellipsis：省略号，fade：淡化透明
this.overflow,
/// 字体显示倍率
this.textScaleFactor,
///最大行数
this.maxLines,
///图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
this.semanticsLabel,
this.textWidthBasis,
this.textHeightBehavior,
})
const TextStyle({
this.inherit = true,///是否使用父类的样式来替换空值
this.color,///文本颜色
this.backgroundColor,///背景颜色
this.fontSize,///文本大小
this.fontWeight,///字体， 加粗等
this.fontStyle,///字体样式
this.letterSpacing,///字间距
this.wordSpacing,///字体间距
this.textBaseline,///文本基线
this.height,///指定行高
this.leadingDistribution,
this.locale,/// 语言环境
this.foreground,///文本的前景色，不能与color共同设置
this.background,///文本背景色
this.shadows,///文字阴影
this.fontFeatures,
this.decoration,///给文本添加装饰物，删除线，下划线等
this.decorationColor,///装饰物的颜色
this.decorationStyle,///装饰物显示样式，虚线，波浪线等
this.decorationThickness,
this.debugLabel,
String? fontFamily,///自定义字体的名字，搭配 package 属性使用。
List<String>? fontFamilyFallback,
String? package,///自定义字体的路径
})
基本使用，属性很多，可以自己都试试
Text(
"庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上，属予作文以记之",
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
// textScaleFactor: 1.5,
style: TextStyle(
fontSize: 20,
color: Colors.red,
fontWeight: FontWeight.bold
),
);
}
- 图文混排
Text.rich(
TextSpan(
children: [
TextSpan(text: "111111111 11", style: TextStyle(color: Colors.red)),
TextSpan(text: "22222222 22", style: TextStyle(color: Colors.blueAccent)),
WidgetSpan(child: Icon(Icons.add_alarm, color: Colors.orange,)),
TextSpan(text: "333333 33", style: TextStyle(color: Colors.blue)),
]
)
)
image.png
Button
Scaffold(
appBar: AppBar(
title: Text('test'),
),
body: Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: Text("ElevatedButton"),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.blueAccent),
backgroundColor: MaterialStateProperty.all(Colors.deepOrangeAccent),
textStyle: MaterialStateProperty.all(TextStyle(
fontSize: 20
))
),
onPressed: () => print("ElevatedButton Click"),
),
TextButton(
child: Text("TextButton"),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.orange),
textStyle: MaterialStateProperty.all(TextStyle(
fontSize: 20
))
),
onPressed: () => print("TextButton Click"),
),
// 3.OutlineButton
OutlinedButton(
child: Text("OutlinedButton"),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.red),
textStyle: MaterialStateProperty.all(TextStyle(
fontSize: 20
))
),
onPressed: () => print("OutlinedButton"),
),
TextButton(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.favorite, color: Colors.red,),
Text("海贼·王路飞")
],
),
onPressed: () {},
)
],
)
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => print("FloatingActionButton"),
),
);
// 1.默认情况下Button上下有一定的间距
// 2.Button变小: ButtonTheme
// 3.取出Button的内边距
ButtonTheme(
child: TextButton(
child: Text("TextButton"),
style: ButtonStyle(
padding: MaterialStateProperty.all(EdgeInsets.all(0)),
foregroundColor: MaterialStateProperty.all(Colors.blueAccent),
backgroundColor: MaterialStateProperty.all(Colors.deepOrangeAccent),
textStyle: MaterialStateProperty.all(TextStyle(
fontSize: 20
))
),
onPressed: () => print("TextButton Click"),
)
)
image.png
buttontheme
图片
在pubspec.yaml中配置好
Image(
color: Colors.green,///颜色, 和colorBlendMode配合使用
colorBlendMode: BlendMode.colorDodge,
image: NetworkImage('https://picsum.photos/id/237/200/300'),
width: 200,///宽
height: 200,///高
fit: BoxFit.cover,///图片的拉伸和挤压，
repeat: ImageRepeat.repeatY,///设置图片重复显示
//alignment: Alignment.bottomCenter,///图片摆放的位置
// 范围: -1 1
alignment: Alignment(0, 0),
)
BoxFit:
contain：全图居中显示但不充满，显示原比例
cover:图片可能拉伸，也可能裁剪，但是充满容器
fill: 全图显示且填充满，图片可能会拉伸
fitHeight: 图片可能拉伸，可能裁剪，高度充满
fitWidth: 图片可能拉伸，可能裁剪，宽度充满
scaleDown: 缩小图片
Image.network('https://picsum.photos/id/237/200/300',width: double.infinity,height: 300,fit: BoxFit.cover,)
/// 加载本图片
Image.asset('assets/images/1.jpg')
/// FadeInImage 做占位
FadeInImage(
///淡出 时间
fadeOutDuration: Duration(milliseconds: 1),
/// 淡入 时间
fadeInDuration: Duration(milliseconds: 1),
placeholder: AssetImage("assets/images/1.jpg"),
image: NetworkImage('https://picsum.photos/id/237/200/300'),
)
image.png
Icon
Icon(Icons.alarm, size: 300, color: Colors.orange,);
Icon(IconData(0xe072, fontFamily: 'MaterialIcons'), size: 300, color: Colors.orange,)
TextField
final usernameTextEditController = TextEditingController();
TextField(
controller: usernameTextEditController,
/// TextField的外观以及提示信息等
decoration: InputDecoration(
labelText: "username",
icon: Icon(Icons.people),
hintText: "请输入用户名",
border: InputBorder.none,
filled: true,
fillColor: Colors.red[100]
),
///text改变时
onChanged: (value) {
print("onChange:$value");
},
///text提交完成时
onSubmitted: (value) {
print("onSubmitted:$value");
},
)
/// 获取text
final username = usernameTextEditController.text;
网友评论