1. 基础组件的部分属性
1.1. shape属性
ShapeBorder shape,对应子类如下:
- BoxBorder
1.1. BorderDirectional --通过【top】【bottom】【start】【end】
shape: BorderDirectional(
top: BorderSide(color: Colors.white),
start: BorderSide(color: Colors.black,width: 15)
),
1.2. Border --通过【top】【bottom】【left】【right】
shape: Border(
top: BorderSide(width: 5.0, color: Colors.grey),
left: BorderSide(width: 5.0, color: Colors.grey),
),
- RoundedRectangleBorder --圆角类矩形边框
shape: RoundedRectangleBorder(
side: BorderSide(width: 1.0, color: Colors.black),
borderRadius: BorderRadius.all(Radius.circular(15))
),
- ContinuousRectangleBorder --圆角类矩形边框
shape: ContinuousRectangleBorder(
side: BorderSide.none,
borderRadius: BorderRadius.circular(40.0),
),
- StadiumBorder --圆角矩形,不需要设置borderRadius
shape: StadiumBorder(
side: BorderSide(width: 2.0, color: Colors.grey)
),
- CircleBorder --裁剪为圆形
shape: CircleBorder(
side: BorderSide(width: 2.0, color: Colors.grey),
),
- BeveledRectangleBorder --扁平或“斜角”角的矩形边框
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(width: 2.0, color: Colors.grey)
),
- InputBorder --输入框边框
7.1. OutlineInputBorder
shape: OutlineInputBorder(
borderSide: BorderSide(width: 2.0, color: Colors.purple),
borderRadius: BorderRadius.circular(20.0),
),
7.2. UnderlineInputBorder
shape: UnderlineInputBorder(
borderSide: BorderSide(width: 5.0, color: Colors.blue),
borderRadius: BorderRadius.circular(20),
),
1.2. decoration属性
Decoration decoration,对应子类如下:
- BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像
const BoxDecoration({
this.color,
this.image,
this.border,
this.borderRadius,
this.boxShadow,
/** LinearGradient线性渐变和RadialGradient扫描渐变 */
this.gradient,
/** 图像混合模式 */
this.backgroundBlendMode,
/** BoxShape.circle和borderRadius不能同时使用 */
this.shape = BoxShape.rectangle,
})
decoration: BoxDecoration(
// 边色与边宽度
border: Border.all(color: Color(0xFFFFFF00), width: 0.5),
//背景图片
image: DecorationImage(
image: NetworkImage('地址'),
fit: BoxFit.fill
//centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),// 固定大小
),
),
- ShapeDecoration:实现四边分别指定颜色和宽度、底部线、矩形边色等
const ShapeDecoration({
this.color,
this.image,
this.gradient,
this.shadows,
//除了shape属性,其他与BoxDecoration一致
required this.shape,
})
- FlutterLogoDecoration:Flutter的logo图片
- UnderlineTabindicator:下划线
const UnderlineTabIndicator({
this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
//控制下划高底,左右边距,可以为负值
this.insets = EdgeInsets.zero,
})
1.3. ButtonStyle属性
- MaterialStateProperty.resolveWith() 可拦截分别设置不同状态下的样式
- MaterialStateProperty.all() 设置点击事件所有状态下的样式
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith((state) {
if (state.contains(MaterialState.pressed)) {
//设置按下时背景颜色
return Colors.green[200];
}
return Colors.green;
}),
shape: MaterialStateProperty.all(const StadiumBorder()),
),
onPressed: () {},
child: Text("上传",style: TextStyle(color: Colors.white),)),
1.4. BoxFit 缩放模式
- fill:拉伸填充满显示空间,图片本身长宽比会发生变化,图片会变形
- cover:按本身长宽比放大后居中填满显示空间,图片不会变形,超出部分会被剪裁。
- contain:默认值,按本身长宽比缩放以适应当前显示空间,图片不会变形。
- fitWidth:图片的宽度会缩放到显示空间的宽度,高度会按比例缩放,然后居中显示,图片不会变形,超出显示空间部分会被剪裁。
- fitHeight:图片的高度会缩放到显示空间的高度,宽度会按比例缩放,然后居中显示,图片不会变形,超出显示空间部分会被剪裁。
- none:图片没有适应策略,会在显示空间内显示图片,如果图片比显示空间大,则显示空间只会显示图片中间部分。
2. 布局类组件
- ConstrainedBox
用于对子组件添加额外的约束。 - SizedBox
用于给子元素指定固定的宽高。 - UnconstrainedBox
子组件将不再受到约束,大小完全取决于自己。但对父组件限制的“去除”并非是真正的去除,仍然还是占有相应的空间。 - Stack
层叠布局Stack允许多个组件重叠显示,同Android中的Frame布局、Web 中的绝对定位,Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位。
任何时候子组件都必须遵守其父组件的约束。如果Row里面嵌套Row,或者Column里面再嵌套Column,那么只有最外面的Row或Column会占用尽可能大的空间,里面Row或Column所占用的空间为实际大小,
3. 可滚动组件
- ListView
ListView创建的方式通常有三种,分别为ListView(),ListView.builder(),ListView.separated()
- ListView()一次性创建所有Item,性能较差,适用于Item个数确定且数量较少的情况;
- ListView.builder()不会一次性创建所有Item,而是需要展示的Item才会去创建,性能较好;
- ListView.separated使用separatorBuilder参数可以在生成的列表项之间添加一个分割组件;
- GridView
4. 组件使用注意问题
- DropdownButton
DropdownButton的初始值必须是显示列表里面的值,比如DropdownButton的items属性使用的是list这个列表里面的值,那么这个初始值必须在list[index]里面取,要不就会报错。
- Expanded
Expanded、Flexible,只在Row、Column等组件内使用,不在其他组件内使用。在“Container、Padding、Stack”等组件中会报错。
5. 插件
- 图片选择
image_picker: ^0.8.4+10
每次只能选择一个文件,拍照和相册分别调用
ImagePicker().pickImage(source: ImageSource.gallery)
ImagePicker().pickVideo(source: ImageSource.camera)
ImagePicker().pickMultiImage()
images_picker: ^1.2.10
可以设置count同时选择多张,拍照和相册分别调用
// for pick
int count = 1,
PickType pickType = PickType.image,
bool gif = true,
int maxTime = 120,
CropOption cropOpt,
int maxSize,
double quality,
// for camera
PickType pickType = PickType.image,
int maxTime = 15,
CropOption cropOpt,
int maxSize,
double quality,
ImagesPicker.pick(
count: 3,
pickType: PickType.image,
gif: true, // default is true
cropOpt: CropOption(
aspectRatio: CropAspectRatio.custom,
cropType: CropType.rect, // currently for android
),
);
ImagesPicker.openCamera(
pickType: PickType.video,
maxTime: 15, // record video max time
);
File file = await downloadFile('图片下载地址');
ImagesPicker.saveImageToAlbum(file, albumName: "");