Flutter UI - Decoration 、shape，积累总结

作者：System 时间：2024年08月12日分类：所有,flutter 字数：1064

这篇文章距离上次修改已过275天，其中的内容可能已经有所变动。

在Flutter中，Decoration和BoxDecoration的shape属性是用来定义装饰容器的形状的。shape属性的类型是BoxShape，它有三个可能的值：BoxShape.circle、BoxShape.rectangle和BoxShape.circle。

BoxShape.circle：创建一个圆形的装饰。你可以通过设置BorderRadius.circular(radius)来确保边缘是圆的，其中radius是你想要的圆角半径。
BoxShape.rectangle：创建一个矩形的装饰。你可以通过BorderRadius来设置矩形的边缘圆润程度。
BoxShape.rectangle：创建一个圆角矩形的装饰。你可以通过BorderRadius来设置圆角的半径大小。

以下是一些示例代码：

// 圆形装饰
Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.blue,
  ),
  width: 100.0,
  height: 100.0,
),

// 矩形装饰，圆角矩形
Container(
  decoration: BoxDecoration(
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.green,
  ),
  width: 100.0,
  height: 100.0,
),

// 圆角矩形装饰
Container(
  decoration: BoxDecoration(
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.vertical(top: Radius.circular(10.0)),
    color: Colors.red,
  ),
  width: 100.0,
  height: 100.0,
),

这些代码示例展示了如何在Flutter中创建不同形状的装饰容器。第一个是一个纯粹的圆形，第二个是一个带有圆角的矩形，第三个是一个只在顶部有圆角的矩形。

Flutter UI - Decoration 、shape，积累总结

评论已关闭

推荐阅读