Flutter UI - Decoration 、shape,积累总结

在Flutter中,DecorationBoxDecorationshape属性是用来定义装饰容器的形状的。shape属性的类型是BoxShape,它有三个可能的值:BoxShape.circleBoxShape.rectangleBoxShape.circle

  1. BoxShape.circle:创建一个圆形的装饰。你可以通过设置BorderRadius.circular(radius)来确保边缘是圆的,其中radius是你想要的圆角半径。
  2. BoxShape.rectangle:创建一个矩形的装饰。你可以通过BorderRadius来设置矩形的边缘圆润程度。
  3. 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中创建不同形状的装饰容器。第一个是一个纯粹的圆形,第二个是一个带有圆角的矩形,第三个是一个只在顶部有圆角的矩形。

none
最后修改于:2024年08月12日 14:46

评论已关闭

推荐阅读

DDPG 模型解析,附Pytorch完整代码
2024年11月24日
DQN 模型解析,附Pytorch完整代码
2024年11月24日
AIGC实战——Transformer模型
2024年12月01日
Socket TCP 和 UDP 编程基础(Python)
2024年11月30日
python , tcp , udp
如何使用 ChatGPT 进行学术润色?你需要这些指令
2024年12月01日
AI
最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别(详细教程)
2024年11月24日
ChatGPT 和 DALL·E 2 配合生成故事绘本
2024年12月01日
omegaconf,一个超强的 Python 库!
2024年11月24日
【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测
2024年12月01日
[超级详细]如何在深度学习训练模型过程中使用 GPU 加速
2024年11月29日
Python 物理引擎pymunk最完整教程
2024年11月27日
MediaPipe 人体姿态与手指关键点检测教程
2024年11月27日
深入了解 Taipy:Python 打造 Web 应用的全面教程
2024年11月26日
基于Transformer的时间序列预测模型
2024年11月25日
Python在金融大数据分析中的AI应用(股价分析、量化交易)实战
2024年11月25日
AIGC Gradio系列学习教程之Components
2024年12月01日
Python3 `asyncio` — 异步 I/O,事件循环和并发工具
2024年11月30日
llama-factory SFT系列教程:大模型在自定义数据集 LoRA 训练与部署
2024年12月01日
Python 多线程和多进程用法
2024年11月24日
Python socket详解,全网最全教程
2024年11月27日