Flutter组件————Container

Container

Container 是 Flutter 中最常用的布局组件之一

参数

参数名称类型描述
alignmentAlignmentGeometry定义子组件在其内部的对齐方式,默认为 null,即不改变子组件的位置。
paddingEdgeInsetsGeometry内边距,用于在子组件周围添加空间。
colorColor设置容器的背景颜色。如果设置了 decoration,则此属性会被忽略。
decorationDecoration用于绘制容器的装饰(如背景、边框等)。不能与 foregroundDecoration 和 color 同时使用。
foregroundDecorationDecoration在子组件之上绘制的装饰。
widthdouble设置容器的宽度。
heightdouble设置容器的高度。
constraintsBoxConstraints对容器尺寸施加约束条件。
marginEdgeInsetsGeometry外边距,用于在容器与其他组件之间添加空间。
transformMatrix4应用到容器的变换矩阵,例如旋转、缩放或平移。
transformAlignmentAlignmentGeometry指定变换的原点相对于容器的对齐方式,默认为中心。
childWidget容器中包含的子组件。
clipBehaviorClip控制是否以及如何裁剪超出容器边界的内容,默认值为 Clip.none。
constraintsBoxConstraints限制容器大小的最大最小宽高,当与 width 或 height 一起使用时,这些值会覆盖约束中的相应部分。

Decoration 属性

Decoration是用来修饰container的组件的抽象类,我们可以使用他的实现类对container进行修饰

1. BoxDecoration

BoxDecoration 是最常用的一种装饰类型,它可以组合多种视觉元素来定制容器的外观。以下是 BoxDecoration 支持的主要属性:

  • color (Color):设置容器的纯色背景。
  • gradient (Gradient):使用线性或径向渐变作为背景。
  • image (DecorationImage):用图片填充背景,支持调整图像的适应方式(如平铺、缩放等)。
  • border (BoxBorder):定义容器的边框样式,包括宽度、颜色和圆角。
  • borderRadius (BorderRadiusGeometry):设置边框的圆角半径。
  • boxShadow (List<BoxShadow>):添加一个或多个阴影效果到容器。
  • shape (BoxShape):定义容器的形状,默认是矩形,也可以设置为圆形。

示例代码:

Container(
  decoration: BoxDecoration(
    color: Colors.blue, // 背景颜色
    gradient: LinearGradient(colors: [Colors.red, Colors.blue]), // 渐变背景
    image: DecorationImage(image: NetworkImage('URL'), fit: BoxFit.cover), // 图片背景
    border: Border.all(color: Colors.black, width: 2.0), // 边框
    borderRadius: BorderRadius.circular(12.0), // 圆角边框
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // 阴影位置
      ),
    ],
  ),
)

2. ShapeDecoration

ShapeDecoration 可以用来绘制具有特定形状的背景。它通常与 ShapeBorder 结合使用,比如 CircleBorderRoundedRectangleBorder,以创建圆形或圆角矩形等形状。

示例代码:

Container(
  decoration: ShapeDecoration(
    color: Colors.green,
    shape: CircleBorder(), // 创建圆形背景
  ),
)

3. Gradient

虽然 Gradient 主要用于 BoxDecoration 中,但它本身也是一个独立的装饰类型,可以直接应用于其他需要渐变效果的地方。Flutter 提供了两种类型的渐变:

  • LinearGradient:线性渐变,沿直线方向变化颜色。
  • RadialGradient:径向渐变,从中心向外扩散变化颜色。

示例代码

class CompentPage extends StatefulWidget {
  const CompentPage({super.key});

  
  _CompentPageState createState() => _CompentPageState();
}

class _CompentPageState extends State<CompentPage> {
  
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center, //子组件在其内部的对齐方式
      padding: const EdgeInsets.all(10), // 内边距
      // color: Colors.white, // 背景颜色
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(color: Colors.red, width: 2),
          borderRadius: BorderRadius.circular(10)),
      width: 200, // 宽度
      height: 200, // 高度
      constraints: const BoxConstraints(maxHeight: 200), // 限制组件大小
      margin: const EdgeInsets.all(10),  // 外边距
      clipBehavior: Clip.hardEdge, /// 裁剪方式
      ///边框(使用的时候不能使用color)
      child: const Text("container组件"), // 子组件
    );
  }
}

效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/941298.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ElasticSearch - 深入解析 Elasticsearch Composite Aggregation 的分页与去重机制

文章目录 Pre概述什么是 composite aggregation&#xff1f;基本结构after 参数的作用问题背景&#xff1a;传统分页的重复问题after 的设计理念响应示例 after 如何确保数据不重复核心机制Example步骤 1: 创建测试数据创建索引插入测试数据 步骤 2: 查询第一页结果查询第一页返…

MySQL 8.0:explain analyze 分析 SQL 执行过程

介绍 MySQL 8.0.16 引入一个实验特性&#xff1a;explain formattree &#xff0c;树状的输出执行过程&#xff0c;以及预估成本和预估返 回行数。在 MySQL 8.0.18 又引入了 EXPLAIN ANALYZE&#xff0c;在 formattree 基础上&#xff0c;使用时&#xff0c;会执行 SQL &#…

【C++动态规划 图论】3243. 新增道路查询后的最短距离 I|1567

本文涉及知识点 打开打包代码的方法兼述单元测试 C动态规划 C图论 LeetCode3243. 新增道路查询后的最短距离 I 给你一个整数 n 和一个二维整数数组 queries。 有 n 个城市&#xff0c;编号从 0 到 n - 1。初始时&#xff0c;每个城市 i 都有一条单向道路通往城市 i 1&#…

120页PPT讲解ChatGPT如何与财务数字化转型的业财融合

此方案主要聚焦于利用ChatGPT技术与数字化转型推动业财融合&#xff0c;实现企业的价值最大化。首先&#xff0c;通过ChatGPT技术&#xff0c;企业可以构建生成式对话机器人&#xff0c;自动回答常见问题&#xff0c;减轻人工客服的压力&#xff0c;提高响应速度。这种机器人具…

旋转框目标检测自定义数据集训练测试流程

文章目录 前言一、数据集制作二、模型训练2.1 划分训练集验证集:2.2 配置yaml文件:2.3 训练 前言 旋转框目标检测&#xff08;Rotated bounding box object detection&#xff09;是计算机视觉领域的一项技术&#xff0c;它用于检测图像中具有任意方向的目标。与传统的水平矩形…

【QSS样式表 - ⑥】:QPushButton控件样式

文章目录 QPushBUtton控件样式QSS示例 QPushBUtton控件样式 常用子控件 常用伪状态 QSS示例 代码&#xff1a; QPushButton {background-color: #99B5D1;color: white;font-weigth: bold;border-radius: 20px; }QPushButton:hover {background-color: red; }QPushButton:p…

C# Random 随机数 全面解析

总目录 前言 一、Random 是什么&#xff1f; 1. 简介 表示伪随机数生成器&#xff0c;这是一种能够产生满足某些随机性统计要求的数字序列的算法。 public class Random继承&#xff1a;Object → Random 2. 构造函数 3. 属性 4. 方法 二、Random 的使用 1. Next() 或 Nex…

Linux网络——UDP的运用

Linux网络——UDP的运用 文章目录 Linux网络——UDP的运用一、引入二、服务端实现2.1 创建socket套接字2.2 绑定bind2.3 启动服务器2.4 IP的绑定的细节2.5 读取数据recvfrom 三、用户端实现3.1 绑定问题3.2 发送数据sendto 四、代码五、UDP实现网络聊天室&#xff08;简易版&am…

IDEA使用Alt + Enter快捷键自动接受返回值一直有final修饰的问题处理

在使用IDEA的过程中&#xff0c;使用快捷键Alt Enter在接收返回值时&#xff0c;可以快速完成参数接收&#xff0c;但前面一直会出现接收参数前面有final修饰的情况&#xff0c;效果如下所示&#xff1a; 看着真烦人呢&#xff0c;我们会发现在接受到返回值是上方有个 Declare…

【小白51单片机专用教程】protues仿真AT89C51入门

课程特点 无需开发板0基础教学软件硬件双修辅助入门 本课程面对纯小白&#xff0c;因此会对各个新出现的知识点在实例基础上进行详细讲解&#xff0c;有相关知识的可以直接跳过。课程涉及protues基本操作、原理图设计、数电模电、kell使用、C语言基本内容&#xff0c;所有涉及…

软件设计与体系结构

1.简要说明什么是软件体系结构&#xff0c;软件体系结构模型&#xff0c;为什么要建立软件体系结构模型&#xff1f; 答&#xff1a;软件体系结构指一个软件系统在高层次上的结构化组织方式&#xff0c;包括系统的组成部分和各个部分之间的关系&#xff0c;以及它们与环境之间的…

位置式PID-控制步进电机-位置环-stm32

基本原理 1、软件设计 本闭环控制例程是在步进电机编码器测速例程的基础上编写的,这里只讲解核心的部分代码,有些变量的设置,头文件的包含等并没有涉及到,完整的代码请参考本章配套的工程。 我们创建了4个文件:bsp_pid.c和bsp_pid.h文件用来存放PID控制器相关程序,bsp_s…

汽车IVI中控开发入门及进阶(47):CarPlay开发

概述: 车载信息娱乐(IVI)系统已经从仅仅播放音乐的设备发展成为现代车辆的核心部件。除了播放音乐,IVI系统还为驾驶员提供导航、通信、空调、电源配置、油耗性能、剩余行驶里程、节能建议和许多其他功能。 ​ 驾驶座逐渐变成了你家和工作场所之外的额外生活空间。2014年,…

电力通信规约-104实战

电力通信规约-104实战 概述 104规约在广泛应用于电力系统远动过程中&#xff0c;主要用来进行数据传输和转发&#xff0c;本文将结合实际开发实例来讲解104规约的真实使用情况。 实例讲解 因为个人技术栈是Java&#xff0c;所以本篇将采用Java实例来进行讲解。首先我们搭建一…

AWS Transfer 系列:简化文件传输与管理的云服务

在数字化转型的今天&#xff0c;企业对文件传输、存储和管理的需求日益增长。尤其是对于需要大量数据交换的行业&#xff0c;如何高效、可靠地传输数据成为了一大挑战。为了解决这一难题&#xff0c;AWS 提供了一系列的文件传输服务&#xff0c;统称为 AWS Transfer 系列。这些…

动态规划<四> 回文串问题(含对应LeetcodeOJ题)

目录 引例 其余经典OJ题 1.第一题 2.第二题 3.第三题 4.第四题 5.第五题 引例 OJ 传送门Leetcode<647>回文子串 画图分析&#xff1a; 使用动态规划解决 原理&#xff1a;能够将所有子串是否是回文的信息保存在dp表中 在使用暴力方法枚举出所有子串&#xff0c;是…

stm32定时器输出比较----驱动步进电机

定时器输出比较理论 OC(Output Compare)输出比较输出比较可以通过比较CNT与CCR寄存器值的关系,来对输出电平进行置1、置0或翻转的操作,用于输出一定频率和占空比的PWM波形每个高级定时器和通用定时器都拥有4个输出比较通道高级定时器的前3个通道额外拥有死区生成和互补输出…

Windows电脑部署SD 3.5结合内网穿透随时随地生成高质量AI图像

文章目录 前言1. 本地部署ComfyUI2. 下载 Stable Diffusion3.5 模型3. 演示文生图4. 公网使用Stable Diffusion 3.5 大模型4.1 创建远程连接公网地址 5. 固定远程访问公网地址 前言 在数字化创意时代&#xff0c;AI技术的发展为我们带来了无限可能。尤其是对于那些追求高效和高…

Easysearch Java SDK 2.0.x 使用指南(二)

在 上一篇文章 中&#xff0c;我们介绍了 Easysearch Java SDK 2.0.x 的基本使用和批量操作。本文将深入探讨索引管理相关的功能&#xff0c;包括索引的创建、删除、开关、刷新、滚动等操作&#xff0c;以及新版 SDK 提供的同步和异步两种调用方式。 SDK 的对象构建有两种方式…

Scala——身份证号码查询籍贯

object Test_身份证查询籍贯 { def main(args: Array[String]): Unit { val code "42005200210030051".substring(0,2) println(code) //判断42是哪个省的 //湖北 // if(code "42"){ // println("42对应省份为&#xff1a;湖北") // }else…