Flutter UI - Decoration 、shape,积累总结
在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中创建不同形状的装饰容器。第一个是一个纯粹的圆形,第二个是一个带有圆角的矩形,第三个是一个只在顶部有圆角的矩形。
评论已关闭