Flutter学习——组件篇

《Flutter实战·第二版》- Preview

1. 基础组件的部分属性

1.1. shape属性

ShapeBorder shape，对应子类如下：

1. 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),
),

2. RoundedRectangleBorder --圆角类矩形边框

shape: RoundedRectangleBorder(
    side: BorderSide(width: 1.0, color: Colors.black),
    borderRadius: BorderRadius.all(Radius.circular(15))
),

3. ContinuousRectangleBorder --圆角类矩形边框

shape: ContinuousRectangleBorder(
    side: BorderSide.none,
    borderRadius: BorderRadius.circular(40.0),
),

4. StadiumBorder --圆角矩形，不需要设置borderRadius

shape: StadiumBorder(
    side: BorderSide(width: 2.0, color: Colors.grey)
),

5. CircleBorder --裁剪为圆形

shape: CircleBorder(
    side: BorderSide(width: 2.0, color: Colors.grey),
),

6. BeveledRectangleBorder --扁平或“斜角”角的矩形边框

shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
    side: BorderSide(width: 2.0, color: Colors.grey)
),

7. 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，对应子类如下：

1. 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),// 固定大小
    ),
),

2. ShapeDecoration:实现四边分别指定颜色和宽度、底部线、矩形边色等

const ShapeDecoration({
    this.color,
    this.image,
    this.gradient,
    this.shadows,
    //除了shape属性，其他与BoxDecoration一致
    required this.shape,
})

3. FlutterLogoDecoration:Flutter的logo图片
4. 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()

1. ListView()一次性创建所有Item，性能较差，适用于Item个数确定且数量较少的情况；
2. ListView.builder()不会一次性创建所有Item，而是需要展示的Item才会去创建，性能较好；
3. 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: "");

• 扫码
  ai_barcode: ^3.0.1