网络知识 娱乐 Flutter教程08——适配

Flutter教程08——适配

发布: 2023年2月14日 10:17:50

1.Clip剪裁

flutter提供了一些剪裁函数：

ClipOval，子组件为正方形时剪裁成内贴圆形，为矩形时，剪裁成内贴椭圆；

ClipRRect，将子组件剪裁为圆角矩形；

ClipRect，默认剪裁掉子组件布局空间之外的绘制内容（溢出部分剪裁）；

ClipPath，按照自定义的路径剪裁；

Widget img = Image.asset(
      'imgs/steelrain.jpg',
      width: 200,
    );
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center, //  垂直方向居中
        children: [
          Padding(
            padding: const EdgeInsets.all(10),
            child: img,
          ),
          Padding(
            padding: const EdgeInsets.all(10),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(5.0),
              child: img,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ClipRect(
                  //将溢出部分剪裁
                  child: Align(
                    widthFactor: 0.5, //宽度设为原来宽度一半
                    child: img,
                  ),
                ),
                const Text(
                  '剪裁掉溢出的',
                  style: TextStyle(color: Colors.red),
                ),
              ],
            ),
          ),
        ],
      ),
    );

剪裁效果图：

2.FittedBox

如果子组件大小超出了父组件的大小flutter会发出一个警告。

此类问题通常有两类：

子组件内容过多，父组件大小有限，子组件如何改变自身以避免内容溢出；

父组件空间有剩余，子组件应该改变自身来尽可能占用更多父组件；

Flutter提供了一个FittedBox组件来针对此类问题的处理。

const FittedBox({
  Key? key,
  this.fit = BoxFit.contain, // 适配方式
  this.alignment = Alignment.center, //对齐方式
  this.clipBehavior = Clip.none, //是否剪裁
  Widget? child,
})

2.1适配原理

FittedBox 在布局子组件时会忽略其父组件传递的约束，可以允许子组件无限大，即FittedBox 传递给子组件的约束为（0<=width<=double.infinity, 0<= height <=double.infinity）；

FittedBox 对子组件布局结束后就可以获得子组件真实的大小；

FittedBox 知道子组件的真实大小也知道他父组件的约束，那么FittedBox 就可以通过指定的适配方式（BoxFit 枚举中指定），让起子组件在 FittedBox 父组件的约束范围内按照指定的方式显示；

示例：

return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 100,
            height: 100,
            color: Colors.red,
            child: FittedBox(
              fit: BoxFit.contain, //  默认值就是这个
              child: Container(
                color: Colors.blue,
                width: 180,
                height: 150,
              ),
            ),
          ),
        ],
      ),
    );
  }

 子组件大小超过父组件大小，子组件知道了适配方式为BoxFit.contain，所以会按照子组件大小比例进行缩放以尽可能占用尽可能多的父组件空间。效果如下：

 

相关文章