目 录CONTENT

文章目录

Flutter 装饰组件( Padding,SizeBox,DecoratedBox,Container,Transform,Clip )

Sakura
2024-11-08 / 0 评论 / 0 点赞 / 6 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于35天前,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1. 留白 Padding

字节点和父节点之间填充空白区域

const Card(
  shape: RoundedRectangleBorder(),
  child: Padding(
    padding: EdgeInsets.all(10),
    child: Text("Sakura ! "),
  ),
)

EdgeInsets 指定不同的填充方式, 最常用的两种:

  • only(left, top, right, botton): 分别指定上下左右的填充, 可以单独指定

  • all(double value): 四个方向填充相同数值

2. 限制子组件的大小 SizeBox

  1. 限制子组件的大小

body: const SizedBox(
  width: 200,
  height: 200,
  child: Column(
    children: [
      FlutterLogo(
        size: 300, // 会显示超出容器大小
      ),
    ]
  )
)

  1. 作为间隔

两个 FlutterLogo 之间间隔 100

const SizedBox(
  width: 200,
  height: 200,
  child: Column(
    children: [
      FlutterLogo(),
      SizedBox(
        height: 100,
      ),
      FlutterLogo()
    ]
  )
)

3. 装饰器 DecoratedBox

可以给子组件设置前景,背景,边框,渐变等装饰效果

  const BoxDecoration({
    this.color, // 颜色
    this.image, // 图片
    this.border, // 边框
    this.borderRadius, // 圆角
    this.boxShadow, // 阴影
    this.gradient,  // 渐变
    this.backgroundBlendMode, // 背景混合模式
    this.shape = BoxShape.rectangle, // 形状
  })

child: DecoratedBox(
    decoration: BoxDecoration(
      color: Colors.black54,
      borderRadius: BorderRadius.circular(16),
    ),
    child: const Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("Hello World"),
          Text("Hello World"),
        ]
      )
    )
),

4. Container

Container 是一个组合类容器,它本身不对应具体的 RenderObject,它是 DecoratedBox、ConstrainedBox、Transform、Padding、Align 等组件组合的一个多功能容器,所以我们只需通过一个 Container 组件可以实现同时需要装饰、变换、限制的场景。

4.1 定义

  • Container 属性

Container({
    Key key,
    // 容器子Widget对齐方式
    this.alignment,
    // 容器内部padding
    this.padding,
    // 背景色
    Color color,
    // 背景装饰
    Decoration decoration,
    // 前景装饰
    this.foregroundDecoration,
    // 容器的宽度
    double width,
    // 容器的高度
    double height,
    // 容器大小的限制条件
    BoxConstraints constraints,
    // 容器外部margin
    this.margin,
    // 变换,如旋转
    this.transform,
    // 容器内子Widget
    this.child,
  })

  • BoxDecoration 装饰属性

const BoxDecoration({
  // 背景色
  this.color,
  // 背景图片
  this.image,
  // 边框样式
  this.border,
  // 边框圆角
  this.borderRadius,
  // 阴影
  this.boxShadow,
  // 渐变
  this.gradient,
  // 背景混合模式
  this.backgroundBlendMode,
  // 形状
  this.shape = BoxShape.rectangle,
})

4.2 Demo

class ContainerPage extends StatelessWidget {
  const ContainerPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        // color: Colors.amber,

        // 外边距
        margin: const EdgeInsets.all(20.0),

        // 内边距
        padding: const EdgeInsets.all(30.0),

        // 子Widget居中
        alignment: Alignment.center,

        // 容器的装饰
        decoration: BoxDecoration(
            color: Colors.blue,

            // 边框
            border: Border.all(
              color: Colors.black,
              width: 5,
            ),
            // 圆角
            borderRadius: BorderRadius.circular(20),

            // 阴影
            boxShadow: const [
              // 两个阴影叠加
              BoxShadow(
                color: Colors.grey,
                offset: Offset(10, 10),
                blurStyle: BlurStyle.normal,
              ),

              BoxShadow(
                color: Colors.deepOrange,
                offset: Offset(5, 5),
                blurStyle: BlurStyle.inner,
              )
            ],
            image: const DecorationImage(
                image: NetworkImage(
                    "<https://images.pexels.com/photos/15804651/pexels-photo-15804651.jpeg>"
                ),
                // 图片的缩放方式
                fit: BoxFit.cover
            ),
          ),

          // 容器前景装饰
          foregroundDecoration:  BoxDecoration(
            color: Colors.blue.withOpacity(0.5),
            borderRadius: BorderRadius.circular(20),
          ),

          // 转换
          // transform: Matrix4.rotationZ(0.5),

          // 约束
          // constraints: const BoxConstraints(
          //   maxHeight: 100,
          //   maxWidth: 100,
          // ),
        child: const Text("Sakura"),
      ),
    );
  }
}

5. 变换 Transform

6. 剪裁 Clip

6.2 自定义剪裁 ClipPath,CustomClipper

0

评论区