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),
),
  1. RoundedRectangleBorder --圆角类矩形边框
shape: RoundedRectangleBorder(
    side: BorderSide(width: 1.0, color: Colors.black),
    borderRadius: BorderRadius.all(Radius.circular(15))
),
  1. ContinuousRectangleBorder --圆角类矩形边框
shape: ContinuousRectangleBorder(
    side: BorderSide.none,
    borderRadius: BorderRadius.circular(40.0),
),
  1. StadiumBorder --圆角矩形,不需要设置borderRadius
shape: StadiumBorder(
    side: BorderSide(width: 2.0, color: Colors.grey)
),

Flutter学习——组件篇_第1张图片

  1. CircleBorder --裁剪为圆形
shape: CircleBorder(
    side: BorderSide(width: 2.0, color: Colors.grey),
),

Flutter学习——组件篇_第2张图片

  1. BeveledRectangleBorder --扁平或“斜角”角的矩形边框
shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
    side: BorderSide(width: 2.0, color: Colors.grey)
),

Flutter学习——组件篇_第3张图片

  1. 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),// 固定大小
    ),
),
  1. ShapeDecoration:实现四边分别指定颜色和宽度、底部线、矩形边色等
const ShapeDecoration({
    this.color,
    this.image,
    this.gradient,
    this.shadows,
    //除了shape属性,其他与BoxDecoration一致
    required this.shape,
})
  1. FlutterLogoDecoration:Flutter的logo图片
  2. 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]里面取,要不就会报错。
Flutter学习——组件篇_第4张图片

  • Expanded

Expanded、Flexible,只在Row、Column等组件内使用,不在其他组件内使用。在“Container、Padding、Stack”等组件中会报错。Flutter学习——组件篇_第5张图片

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

你可能感兴趣的:(【Android学习笔记】,android,flutter)