首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Flutter 零基础入门(四十四):Flutter 图标与图片资源管理 —— 视觉元素实战

    一、Flutter 内置图标 Icon 1️⃣ 基本用法 Icon(Icons.home, size: 40, color: Colors.blue); 说明: Icons → Flutter 内置图标库...), label: Text('添加'), ) 功能: 图标 + 文本组合按钮 常用在列表操作、功能入口 二、自定义图片资源 1️⃣ 添加图片到项目 将图片放入 assets/images/ 文件夹...用户名'), subtitle: Text('消息内容'), trailing: Icon(Icons.chevron_right), ) 功能: 左侧头像 → CircleAvatar 右侧图标...+ FadeInImage 占位图 / 缓存 / 尺寸优化 App 视觉效果专业美观 下一篇预告 《Flutter 零基础入门(四十五):表单与输入控件 —— TextField、表单校验与提交实战...》 下一篇我们将学习: TextField 输入控件 表单校验规则 表单提交与状态管理 让你的 App 可以收集用户输入与提交数据

    13010

    【Flutter 专题】27 易忽略的【小而巧】的技术点汇总 (四)

    和尚继续整理 Flutter 中日常用到的小知识点。 1....CachedNetworkImage 缓存图片 对于加载网络图片时,添加一个加载动画或网络图片异常时添加一个错误图片会给用户一个良好的体验,此时 CachedNetworkImage 可以帮我们解决这个问题...Flutter 提供了13种状态,但需注意的是有些是区分 Android 和 iOS 的,使用时需加注意。 ?...= null), super(key: key); 和尚尝试过程中发现 ExpansionTile 虽然很方便,效果也很好,但是也有一些局限性,如下: 默认右侧箭头图标是固定的...Spacer 创建一个可调节的空间隔,可用于调整 Flex 容器(如行或列)中窗口小部件之间的间距;默认 flex: 1。 ?

    1.8K41

    【Flutter 专题】08 小小优化【登录】页面

    优化二:文本框 TextField 中尾部添加【清空数据】图标 方式一:使用层布局 Stack,在输入文本框 TextField 上一层添加一个【清空数据】图标; new Padding( padding...自带的属性【后缀图标 suffixIcon】,文本框 TextField 提供了很多便利的属性,例如:【前缀图标 prefixIcon】【文本框前图标 icon】; new Expanded( child...优化三:调整键盘弹出样式 设置文本框 TextField 中 keyboardType: TextInputType.phone, Flutter 提供了多种弹出键盘的方式:text/datetime...优化四:根据输入文本框添加【温馨提示】对话框 Flutter 提供了创建和显示弹出对话框的功能,如:showDialog/showMenu/showModalBottomSheet 等,和尚采用的是对话框方式...相关注意 Flutter 提供了很多便利的小图标,使用起来非常方便,和尚但就一个小【×】找到了好几个类似的图,希望可以多多尝试,体验一下。

    1.9K51

    Flutter | 常用组件

    而在 iconfont 中,只是将位码对应的字形做成了图标,所以不同的字符最终就会渲染成不同的图标 在 Flutter 中,iconfont 和图片相比有如下优势 1,体积小 2,矢量的图标,放大不会影响清晰度...3,可以应用文本样式,可以像文本一样改变字体图标颜色,大小对齐等 4,可以通过 TextSpan 和文本混用 使用 Material Design 字体图标 Flutter 默认包含了一套 Material...,但这种需要提供每个图标的码点,这点对开发者并不友好,所以 Flutter 封装了 IconData 和 Icon 来专门显示字体图标,上面栗子可使用如下方式实现 Row( mainAxisAlignment...onPressed: () { controller.clear(); }, ), 通过 suffixIcon 可以设置右侧内图标,并且可以设置点击事件 错误文字提示 TextField( controller...都进行校验会非常麻烦,为此,Flutter 提供了一个 Form 组件,他可以对 输入框进行分组,然后统一进行一些操作,如内容校验,重置,保存等 Form 继承自 StatefulWidget 类,

    13K30

    6详解AppBar小部件

    由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。 在本教程中,我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。...AppBar 导航箭头 当我们将 添加Drawer到Scaffold时 ,会分配一个菜单图标leading来打开抽屉。...AppBar( actions: [ Icon(Icons.more_vert), ], ), Flutter AppBar 操作图标 让我们再向列表中添加一个小部件: AppBar...工具栏包含文字,图标,按钮,和其他任何公司的前景,除了小部件,如Container和Image。...Flutter 中使用 AppBar 的布局 ( leading, title, 和actions) 如何自定义 AppBar 的布局和添加小部件 如何为 AppBar 的图标、文本、背景、高度、阴影颜色和工具栏设置主题

    21.4K10

    【Flutter 专题】07 您搭好【登录】页面了么?

    内容块包括一个应用 Logo,两个图标,两个输入框,一个按钮。 因此需要用到的控件包括:图片,文本输入框,按钮,布局等。当然 Flutter 最大的优势就是一切都是 widget。...在 pubspec.yaml 文件中添加相应的图片文件指向,如:- images/icon_username.png,特别注意:images 与 '-' 之间一定要有空格!!! ? 3....Content 中添加图片即可,如: new Image.asset( 'images/ic_launcher.png', ), 2. Row 中如何添加输入框? ?...解决如下: 水平排列控件需要用到 Row,竖直排列控件需要 Column; 和尚需要在同一行中添加一个图标和一个输入框 TextField,单独的一个文本输入框没问题,但是直接放在 Row 中缺报错;...Flutter 中 ' , ' 类似于 Java 中 ' ; ' 建议编辑完一个属性后添加 ' , ' 而且 Flutter 很贴心的地方是默认后面会有提示,对应的 ' ) ' 级别,方便修改的时候查找

    1.4K41

    【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )

    : 三目运算符 ), ); } /// RefreshIndicator 发生下拉操作时, 回调该方法 /// 该方啊是一个异步方法 , 在方法体前添加 async 关键字...组件 ---- TextField 组件构造函数的可选参数 : 下面代码中的可选参数就是 TextField 组件可以设置的参数选项 ; class TextField extends StatefulWidget...: 三目运算符 ), ); } /// RefreshIndicator 发生下拉操作时, 回调该方法 /// 该方啊是一个异步方法 , 在方法体前添加 async 关键字...官网 : https://flutter.dev/ Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 ) 官方 GitHub 地址 : https://github.com.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab

    12K00

    Flutter零基础到进阶:21天极速入门+跨平台实战项目开发

    跨平台开发已成为大势所趋,而Flutter凭借其卓越的性能、一致的渲染和高效的开发体验,成为了移动端乃至前端领域的新宠。对于初学者而言,如何在短时间内系统掌握并付诸实践?...Day 13-14:常用基础Widget深化学习处理用户输入:TextField(输入框)、Button(按钮)。学习展示数据:ListView(列表)、Card(卡片)。...本周挑战:综合运用布局、状态、导航和这些基础Widget,构建一个简单的待办事项(Todo)应用,能添加、删除、切换完成状态。...了解应用图标、应用名称、权限等基本配置。成就感时刻:将你开发的应用真机运行起来,或者尝试上传到测试平台。这是对你21天学习成果的最佳肯定。...深度优化:学习性能优化技巧,如列表懒加载、图片优化、包体积削减。跨平台扩展:探索Flutter for Web和Flutter for Desktop,真正实现“一套代码,多端运行”的梦想。

    1.1K10

    Flutter for OpenHarmony 构建简洁高效的待办事项应用 实战解析

    ⚠️ 注意:在大型应用中,建议使用不可变对象(final 字段 + copyWith)配合状态管理库(如 Riverpod),但在此小型 Demo 中,直接修改状态更为简洁高效。...builder: (context) => AlertDialog( title: Text('新增任务'), content: TextField( autofocus...child: Icon(Icons.delete, color: Colors.red), ), onDismissed: (direction) => _deleteTask(index), 按钮删除:每项右侧提供...缓解用户焦虑; 大图标+浅灰色:弱化空状态,避免页面显得“空洞”。 3....“撤销”按钮,恢复刚删除的任务 任务分类 添加标签或过滤器(如“全部/未完成/已完成”) 截止日期 扩展 TodoItem 模型,支持设置提醒时间 云同步 接入 Firebase Firestore 实现多设备同步

    18310

    【Flutter】评级对话框组件

    使用 添加依赖 rating_dialog: ^2.0.0 引入 import 'package:rating_dialog/rating_dialog.dart'; 运行命令:「flutter packages...在此方法中,我们将添加」_showRatingAppDialog」小部件。我们将在下面对其进行深入描述。当我们运行应用程序时,我们应该获得屏幕的输出,如屏幕下方的截图所示。...在此对话框中,我们将添加」ratingColor」表示评级栏(星形图标和发光效果)的颜色,「标题」,「消息」表示对话框的消息/描述文本,「图像」,「submitButton」表示提交按钮的标签/文本,「...当我们运行应用程序时,我们应该获得屏幕的输出,如屏幕下方的截图所示。 在此对话框中,您将看到我们将添加图像,标题,描述,星级,评论的textField和最后一个提交按钮。...另外,我们将在右上角的十字图标上添加“取消”。

    5.4K50

    【Flutter 专题】64 图解基本 TextField 文本输入框 (一)

    和尚最近在学习基础的 Flutter Widget,原因在于很多基础的组件有很多容易忽视的注意事项,了解并熟悉后对整体的开发认知会有所提升;今天和尚学习一下 TextField 文本输入框;...decoration 为边框修饰,可以借此来调整 TextField 展示效果;可以设置前置图标,后置图片,边框属性,内容属性等,和尚会在后续集中尝试;若要完全删除装饰,将 decoration 设置为空即可...WhitelistingTextInputFormatter 仅允许输入白名单中字符;如 digitsOnly 仅支持数字 [0-9]; c....当 TextField 设置 enableInteractiveSelection 属性后长按会出现菜单,默认为英文,可通过设置 Flutter 国际化来处理; 在 pubspec.yaml 中集成 flutter_localizations...; dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter 在 MaterialApp 中设置本地化代理和支持的语言类型

    5.9K51
    领券