2025.3.16

news/2025/3/16 23:01:21/文章来源:https://www.cnblogs.com/258-333/p/18775904

好的!下面通过一个具体的例子来说明 IconContainer 构造函数的设计和用法。

示例代码

import 'package:flutter/material.dart';class IconContainer extends StatelessWidget {final Color color;final IconData icon;IconContainer(this.icon, {super.key, this.color = Colors.red});@overrideWidget build(BuildContext context) {return Container(padding: EdgeInsets.all(10),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10),boxShadow: [BoxShadow(color: Colors.black12,blurRadius: 5,),],),child: Icon(icon,color: color,size: 30,),);}
}void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text('IconContainer Example')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [IconContainer(Icons.star), // 使用默认的 color (Colors.red)SizedBox(height: 20),IconContainer(Icons.favorite, color: Colors.pink), // 传入自定义的 color],),),),));
}

代码说明

  1. IconContainer

    • 这是一个自定义的 StatelessWidget,用于显示一个带有背景和阴影的图标。
    • 构造函数接受两个参数:
      • icon(位置参数,必须传入):图标数据(IconData)。
      • color(命名参数,可选,默认值为 Colors.red):图标的颜色。
  2. build 方法

    • 返回一个 Container,包含一个 Icon
    • Container 设置了内边距、背景颜色、圆角和阴影,使图标看起来更美观。
    • Iconcolorsize 由构造函数的参数决定。
  3. main 函数

    • 创建了一个简单的 Flutter 应用,页面中心显示两个 IconContainer
      • 第一个 IconContainer 使用默认的红色(Colors.red)显示一个星星图标(Icons.star)。
      • 第二个 IconContainer 使用自定义的粉色(Colors.pink)显示一个心形图标(Icons.favorite)。

运行效果

  • 页面中心会显示两个图标:
    • 第一个图标是红色的星星。
    • 第二个图标是粉色的心形。
  • 两个图标都有白色背景、圆角和阴影。

构造函数的好处

  1. 灵活性

    • 如果不指定 color,图标会使用默认的红色(Colors.red)。
    • 如果需要自定义颜色,可以传入 color 参数,比如 color: Colors.pink
  2. 简洁性

    • 构造函数直接通过 this.iconthis.color 将参数赋值给成员变量,代码更简洁。
    • 通过 super.keykey 传递给父类,符合 Flutter 的最佳实践。
  3. 可读性

    • 命名参数使得调用时的意图更清晰。例如:
      IconContainer(Icons.star) // 使用默认颜色
      IconContainer(Icons.favorite, color: Colors.pink) // 使用自定义颜色
      

总结

这个例子展示了 IconContainer 构造函数的设计如何使代码更简洁、灵活和易读。通过位置参数和命名参数的结合,既保证了核心功能的实现,又提供了足够的扩展性。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

拉格朗日插值算法

首先介绍下作用 在平面上给定 n 个点,求一条多项式图像穿过所有的点 (每个点横坐标不同)由浅入深,首先想一个悬浮点 1 ,它在除 1 以外给定的点的横坐标上函数值都是 0 。已知它的横坐标 \(x_1\) , 怎么用函数图像表示 我们一拍脑袋发现,可以这么表示 \[f1(x) = \prod_{i =…

本地部署Gemma3模型

本地部署Gemma3模型 1. 拉取并运行 Ollama 容器 # 拉取 Ollama 镜像 docker pull ollama/ollama# 运行 Ollama 容器 docker run -d --gpus all -v ollama:/root/.ollama -p 11434:11434 --name ollama ollama/ollama2. 进入容器并部署 Gemma3 模型(默认4B版 ) # 进入 Ollama 容…

Anaconda中启动Jupyter lab的方法

Anaconda中启动Jupyter lab的方法: 1、在Anaconda Prompt中,使用命令来启动:jupyter lab 2、在Anaconda界面中点击Jupyter lab下方的launch按钮启动,如下图所示:

React+Next.js+MaterialUI+Toolpad技术栈学习——安装

今天跟大家分享一个React+Next.js+MaterialUI技术栈的前端框架Toolpad。相关资源MaterialUI Toolpad框架效果安装运行安装命令npx create-toolpad-app@latest your-app cd your-app npm run dev文件结构 无身份认证 ├── app │ ├── (dashboard) │ │ ├── layou…

测试驱动开发(TDD)浅析

测试驱动开发(TDD:Test Driven Development)是敏捷开发中的一项核心实践,推崇通过测试来驱动整个开发的进行。TDD有别于传统“先编码,后测试”的开发过程,而是要求在编写业务代码之前,先编写测试用例。TDD的概念大致在上世纪90年代随着极限编程(XP:Extreme Programmin…

(18).命令模式

命令模式 命令模式的核心思想是将请求封装为个对象,将其作为命令发起者和接收者的中介,而抽象出来的命令对象又使得能够对一系列请求进行操作,如对请求进行排队,记录请求日志以及支持可撤销的操作等。命令模式参与者:◇命令的执行者(接收者Receiver):它单纯的只具体实现了功…

学嵌入式C语言,看这一篇就够了(5)

C语言的运算符 学习编程语言,应该遵循“字-->词-->句-->段--->章”,对于一条有意义的语句而言,是离不开标点符号的运算符指明要进行的运算和操作,操作数是指运算符的操作对象,根据运算符操作数的数目不同,C语言标准把运算符分为三种:单目运算符(一元运算符…

20242313 2024-2025-2 《Python程序设计》实验一报告

20242313 2024-2025-2 《Python程序设计》实验一报告 课程:《Python程序设计》 班级:2423 姓名:曾海鹏 学号:20242313 实验教师:王志强 实验日期:2025年3月16日 必修/选修:公选课 1.实验内容 1.熟悉Python开发环境; 2.练习Python运行、调试技能;(编写书中的程序,并…

nn.Embedding()函数详解

nn.Embedding()函数详解 nn.Embedding()函数:随机初始化词向量,词向量在正态分布N(0,1)中随机取值 输入: torch.nn.Embedding(num_embeddings, embedding_dim, padding_idx=None, max_norm=None, norm_type=2.0, scale_grad_by_freq=False, sparse=False, _weight=None) num…

htb Authority

端口扫描 nmap -sC -sV -p- -Pn -T4 10.10.11.222 Starting Nmap 7.92 ( https://nmap.org ) at 2024-10-04 19:42 CST Nmap scan report for 10.10.11.222 (10.10.11.222) Host is up (0.40s latency). Not shown: 65506 closed tcp ports (reset) PORT STATE SERVICE …

蓝桥杯14届省B

蓝桥杯14届省赛B组A:int a[105]; int day[]={0,31,28,31,30,31,30,31,31,30,31,30,31};//记录每个月有多少天 set<int> st;//记录不重复的日期void check(int mm,int dd){if (mm>12||mm<1||dd<1||dd>day[mm]) return;else st.insert(mm*100+dd);//st存日期 …