Flutter学习 -widget
Flutter有一套丰富、强大的基础widget，其中以下是很常用的：
Text：
const Text(
this.data, { //data就是我们需要展示的文字，这个是必传字段，其他的都是可选
Key key, //widget的标识
this.style, //文本样式，类型是TextStyle
this.strutStyle, //段落样式，类型是StrutStyle
this.textAlign, //文本的对齐方式，类型是TextAlign
this.textDirection, // 文字方向，类型是TextDirection
this.locale, //选择用户语言和格式的标识符，类型是Locale
this.softWrap, //bool 类型 ，false标识文本只有一行，水平方向无限
this.overflow, //文本的阶段方式，类型是TextOverflow
this.textScaleFactor,//double类型 表示文本相对于当前字体的缩放因子，默认为1.0
this.maxLines,// int 类型，显示的最大行数
this.semanticsLabel, //String 类型，给文本加上一个语义标签，没有实际用处
this.textWidthBasis,//一行或多行文本宽度的不同方式，类型是TextWidthBasis
}) : assert(
data != null,
'A non-null String must be provided to a Text widget.',
),
textSpan = null,
super(key: key);代码：
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: "flutter demo",
home: Center(
child: Text(
'Hello, world! TextStyle 配置文本的显示样式 和 输入文本的样式', ,
// "Text组件的使用",
style: TextStyle(
// 文字颜色
color: Colors.yellow,
// none 不显示装饰线条，underline 字体下方，overline 字体上方，lineThrough穿过文字
decoration: TextDecoration.none,
// solid 直线，double 双下划线，dotted 虚线，dashed 点下划线，wavy 波浪线
decorationStyle: TextDecorationStyle.solid,
// 装饰线的颜色
decorationColor: Colors.red,
// 文字大小
fontSize: 15.0,
// normal 正常，italic 斜体
fontStyle: FontStyle.italic,
// 字体的粗细 normal:正常 bold粗体
fontWeight: FontWeight.bold,
// 文字间的宽度
letterSpacing: 1.0,
// 文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2）
height: 1,
//对齐文本的水平线:
//TextBaseline.alphabetic：文本基线是标准的字母基线
//TextBaseline.ideographic：文字基线是表意字基线；
//如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
textBaseline: TextBaseline.alphabetic),
// 段落的间距样式
strutStyle: StrutStyle(
fontFamily: 'serif',
fontFamilyFallback: ['monospace', 'serif'],
fontSize: 20,
height: 2,
leading: 2.0,
fontWeight: FontWeight.w300,
fontStyle: FontStyle.italic,
forceStrutHeight: true,
debugLabel: 'text demo',
),
// 文字对齐方式
textAlign: TextAlign.left,
// 文字排列方向 ltr 左到右，rtl右到左
textDirection: TextDirection.ltr,
// 用于选择区域特定字形的语言环境
locale: Locale('zh_CN'),
// 软包裹 ，文字是否应该在软断行出断行
softWrap: false,
// 如何处理视觉溢出:clip 剪切溢出的文本以修复其容器。ellipsis 使用省略号表示文本已溢出。fade 将溢出的文本淡化为透明。
overflow: TextOverflow.ellipsis,
// 文字的缩放比例
textScaleFactor: 1.0,
// 文本要跨越的可选最大行数,
maxLines: 1,
// 图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
semanticsLabel: 'text demo',
textWidthBasis: TextWidthBasis.longestLine,
),
),
);
}Container:
Container({
super.key,
this.alignment,//child对齐的属性，可以设置居中、居左、居右、居上、居下
this.padding,//内边距，width和height包含padding值。
this.color, //背景颜色
this.decoration,//设置装饰，比如边框、圆角、背景图片。不能给Container同时设置decoration和color属性，如果要同时设置，给decoration和color就可以。
this.foregroundDecoration,//设置前景装饰
double? width,//宽度
double? height,//高度
BoxConstraints? constraints,//大小范围约束，constraints有四个属性：minWidth、minHeight、maxWidth、maxHeight。
this.margin,//外边距
this.transform,//变换效果，翻转、旋转、变形
this.transformAlignment,
this.child,//子组件，可以不设置
this.clipBehavior = Clip.none,
}) : assert(margin == null || margin.isNonNegative),
assert(padding == null || padding.isNonNegative),
assert(decoration == null || decoration.debugAssertIsValid()),
assert(constraints == null || constraints.debugAssertIsValid()),
assert(clipBehavior != null),
assert(decoration != null || clipBehavior == Clip.none),
assert(color == null || decoration == null,
'Cannot provide both a color and a decoration\n'
'To provide both, use "decoration: BoxDecoration(color: color)".',
),
constraints =
(width != null || height != null)
? constraints?.tighten(width: width, height: height)
?? BoxConstraints.tightFor(width: width, height: height)
: constraints;代码：
class ContainerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Center(
child: Container(
//child对齐的属性，topLeft、topCenter、topRight、centerLeft、center、centerRight、bottomLeft、bottomCenter、bottomRight
alignment: Alignment.center,
width: 500,
height: 400,
//内边距
padding: const EdgeInsets.all(10),
//外边距
margin: const EdgeInsets.all(20),
//渐变背景色
decoration: BoxDecoration(
gradient: const LinearGradient(//线性渐变
colors: [Colors.lightBlue, Colors.green, Colors.yellow]),
//边框
border: Border.all(width: 5.0, color: const Color(0xFFFF7F7F7F))),
//背景颜色
// color: Colors.lightBlue,
// child: const Text("Container是flutter中广泛使用的容器类组件",
// style: TextStyle(fontSize: 24.0 ,color: Colors.yellow,decoration: TextDecoration.none),),
),
),
);
}
}
Image:
1、image是一个用于图片展示的组件，支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。
2、image 的静态函数
Image.asset - 用于从资源目录的显示图片,需要在 pubspec.yaml 文件中声明。
Image.network - 用于从网络上显示图片。
Image.file - 用于从文件里显示图片。
Image.memory - 用于从内存里（Uint8List）显示图片。
3.image属性：
const Image({
super.key,
required this.image,
this.frameBuilder,
this.loadingBuilder,
this.errorBuilder,
this.semanticLabel,//用来描述图片的，无足轻重
this.excludeFromSemantics = false,
this.width,//图像的宽度
this.height,//图像的高度
this.color,//对图片进行混合颜色处理
this.opacity,
this.colorBlendMode,//对图片进行混合颜色处理
this.fit,// contain 保持原图比例，fill填充图片图片不保帧，fitWidth横向填充图片不会被裁减，fitHeight纵向填充图片不会被裁减，cover 图片可能被裁切，但是保帧，scaleDown原图片大
this.alignment = Alignment.center,//这个是用来调整显示位置的
this.repeat = ImageRepeat.noRepeat,设置图片重复填充方式
this.centerSlice,//将图片中的centerSlice区域设置为.9图片，按照.9图片进行拉伸显示。
this.matchTextDirection = false,//matchTextDirection一般和TextDirection搭配使用
this.gaplessPlayback = false,//当image provider 发生变化时，显示新图片的过程中，如果true则保留旧图片直至显示出新图片为止；如果false，则显示新图片的过程中，空白，不保留旧图片
this.isAntiAlias = false,
this.filterQuality = FilterQuality.low,
}) : assert(image != null),
assert(alignment != null),
assert(repeat != null),
assert(filterQuality != null),
assert(matchTextDirection != null),
assert(isAntiAlias != null);代码：
class ImageWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
// title: "Image widget",
home: Scaffold(
body: Center(
child: Container(
child: Image.network(
"https://i2.hdslb.com/bfs/face/9bfc69090e907f28cccf9aa7a79c30bd8d962546.jpg@240w_240h_1c_1s.webp",
// repeat: ImageRepeat.repeat,
fit: BoxFit.fitWidth,),
width: 500.0,
height: 500.0,
color: Colors.lightBlue,
)),
),
);
}
}