Flutter鸿蒙next中封装一个输入框组件

1. 创建Flutter项目

首先,确保你已经安装了Flutter SDK,并创建一个新的Flutter项目:

flutter create podcast_app
cd podcast_app

2. 封装输入框组件

我们将在lib目录下创建一个新的文件,命名为custom_input.dart,用于封装输入框。

import 'package:flutter/material.dart';class CustomInput extends StatelessWidget {final String hintText;final TextEditingController controller;final bool obscureText;final IconData? prefixIcon;CustomInput({required this.hintText,required this.controller,this.obscureText = false,this.prefixIcon,});@overrideWidget build(BuildContext context) {return TextField(controller: controller,obscureText: obscureText,decoration: InputDecoration(hintText: hintText,prefixIcon: prefixIcon != null ? Icon(prefixIcon) : null,border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0),),),);}
}

3. 使用输入框组件

现在,我们可以在主应用文件中使用这个输入框组件。在lib/main.dart中,我们会创建一个简单的UI,包含标题和输入框。

import 'package:flutter/material.dart';
import 'custom_input.dart'; // 导入自定义输入框void main() {runApp(PodcastApp());
}class PodcastApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Podcast App',home: PodcastHomePage(),);}
}class PodcastHomePage extends StatefulWidget {@override_PodcastHomePageState createState() => _PodcastHomePageState();
}class _PodcastHomePageState extends State<PodcastHomePage> {final TextEditingController _controller = TextEditingController();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Podcast App'),),body: Padding(padding: const EdgeInsets.all(16.0),child: Column(children: [Text('欢迎来到播客应用',style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),),SizedBox(height: 20),CustomInput(hintText: '输入播客名称',controller: _controller,prefixIcon: Icons.podcast,),SizedBox(height: 20),ElevatedButton(onPressed: () {// 处理输入String podcastName = _controller.text;ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('您输入的播客名称是: $podcastName')),);},child: Text('提交'),),],),),);}
}

4. 运行应用

在终端中运行以下命令以启动应用:

flutter run

5. 总结

在这个示例中,我们创建了一个简单的播客应用,封装了一个自定义输入框组件,并在主页面中使用它。你可以进一步扩展这个应用,增加更多功能,例如播客列表、搜索功能或播放功能。

后续扩展

  • 状态管理:考虑使用状态管理工具如Provider或Riverpod来管理播客列表和用户输入。
  • 网络请求:使用http库从网络获取播客数据并显示。
  • UI优化:改进UI,添加更多样式和交互设计。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

OpenAI正在与台积电(TSMC)和博通(Broadcom)合作,打造自己的AI推理芯片

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

小新学习k8s第四天之发布管理

一、金丝雀发布&#xff08;灰度发布&#xff09; Deployment控制器支持自定义控制更新过程中的滚动节奏&#xff0c;如“暂停(pause)”或“继续(resume)”更新操作。 ①比如等待第一批新的Pod资源创建完成后立即暂停更新过程&#xff0c;此时&#xff0c;仅存在一部分新版本的…

大数据安全方案 验证

一、背景 文档用于记录配置 Kerberos 和 Ranger 后&#xff0c;对 HDFS、Hive 认证和鉴权的功能测试。 二、Kerberos 验证 2.1、验证功能 1&#xff0c;HDFS 认证 2.1.1、访问 HDFS Kerberos 验证前&#xff0c;访问 HDFS 失败。 Kerberos 验证后&#xff0c;访问 HDFS 成…

全面解析:云计算技术及其应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 全面解析&#xff1a;云计算技术及其应用 全面解析&#xff1a;云计算技术及其应用 全面解析&#xff1a;云计算技术及其应用 云…

规范:项目、目录、文件、样式、事件、变量、方法、url参数、注释、git提交 命名规范及考证

一、规范命名的重要性 易懂、通用、规范、标准、专业性、是经验积累的体现 1.1、常见命名方法 序号命名方法解释1全小写2全大写3驼峰&#xff1a;小驼峰命名法4驼峰&#xff1a;大驼峰命名法5烤串命名法 / 脊柱命名法6下划线分隔法 二、项目名 采用小写字母和中划线&#…

03-Dubbo的负载均衡及高性能RPC调用

03-Dubbo的负载均衡及高性能RPC调用 Dubbo 的负载均衡策略 负载均衡策略就是当某个服务压力比较大的时候&#xff0c;这时候部署多个节点同时提供相同的服务 当服务消费者来消费的时候&#xff0c;可以从这多个节点中选择一个节点进行消费&#xff0c;这个选择的过程&#xff0…

【LVGL-列表部件 lv_list_create】

LVGL-列表部件 lv_list_create ■ LVGL-列表部件-函数■ 修改样式-■ 修改样式- 背景色■ 修改样式- 改变项的颜色-label■ 修改样式- 改变项的颜色-btn ■ 事件(Event)■ 示例0&#xff1a;综合■ 示例1&#xff08;自动出现滚动&#xff09;■ 示例2&#xff08;滚动捕捉&…

【React】初学React

A. react中如何创建元素呢&#xff1f; 说明一点&#xff1a; 属性都改为驼峰形式&#xff08;无障碍属性aria-*除外&#xff09;&#xff0c; class改成className 创建元素 B. 变量或表达式如何表示呢&#xff1f;大括号{ }包起来 变量值用大括号包裹 C. 元素和组件的区别 元素…

设备搜索相关协议使用

一、实现原理 首先&#xff0c;Client -> Gateway : 发送 UDP 广播包&#xff08;含厂商自定义协议)这一步表示客户端开始向网络中发送一个包含厂商自定义协议的 UDP 广播包&#xff0c;目的是寻找本厂商的设备&#xff08;网关&#xff09;。客户端此时处于活动状态activa…

TMDOG的Gin学习笔记_01——初识Gin框架

TMDOG的Gin学习笔记_01——初识Gin框架 博客地址&#xff1a;[TMDOG的博客](https://blog.tmdog114514.icu) 作者自述&#xff1a; 停更太久了&#xff0c;是因为开学了课太多了&#xff0c;并且我一直在准备上篇文章的内容正在coding&#xff0c;就先搁置了更新博客QAQ&…

H7-TOOL的CAN/CANFD助手增加帧发送成功标识支持, 继续加强完善功能细节

2.27版本固件正式携带此功能&#xff0c;包括之前做的负载率检测和错误信息展示也将集成到这个版本固件中。 对于接收&#xff0c;我们可以直接看到效果&#xff0c;而发送不行&#xff0c;所以打算在发送的地方展示下发送成功标识。CAN发送不像串口&#xff0c;需要等待应答后…

Pr 视频效果:超级键

视频效果/键控/超级键 Keying/Ultra Key 超级键 Ultra Key效果是 Premiere Pro 中功能强大的抠像工具&#xff0c;主要用于绿幕/蓝幕抠像。通过选择要抠除的颜色&#xff08;通常是绿幕或蓝幕的颜色&#xff09;&#xff0c;即可以将该颜色的像素设为透明&#xff0c;实现主体与…

善用Git LFS来降低模型文件对磁盘的占用

将讲一个实际的例子&#xff1a;对于模型文件&#xff0c;动辄就是好几个G&#xff0c;而有的仓库更是高达几十G&#xff0c;拉一个仓库到本地&#xff0c;稍不注意直接磁盘拉满都有可能。 比如&#xff1a;meta-llama-3.1-8b-instruct&#xff0c;拉到本地后发现居然占用了60G…

「树链剖分」学习笔记

一、引入 “在一棵树上进行路径的修改、求极值、求和”乍一看只要线段树就能轻松解决&#xff0c;实际上&#xff0c;仅凭线段树是不能搞定它的。我们需要用到一种貌似高级的复杂算法——「树链剖分」。 树链剖分&#xff08;简称树剖&#xff09;&#xff0c;顾名思义&#xf…

Golang--数组、切片、映射

1、数组 1.1 数组类型 var 数组名 [数组大小]数据类型 package main import "fmt"func main(){//1、定义一个数组var arr1 [5]intarr1[0] 100arr1[1] 200fmt.Println(arr1) //[100 200 0 0 0] } 1.2 数组的初始化方式 package main import "fmt" func …

结构体对齐,位段

大家好&#xff0c;今天来给大家分享一些结构体的知识&#xff0c;结构体是我们学习数据结构的基础&#xff0c;只有把它了解清楚才能让我们学习数据结构是得心应手&#xff0c;现在让我们来看看它的一些内容吧。 1.结构体的定义和调用我们就跳过吧 大家如果还不熟悉的话可以去…

ElementUI中el-table双击单元格显示输入框

效果图 实现 <el-table:data"formData.products"row-key"id":show-header"true"style"width: 100%; margin-top: 16px"class"zq-table-theme-info"bordercell-dblclick"handleDbClick"> <el-table-col…

Python OpenCV 图像改变

更改图像数据 通过 改像素点 或者 切片的区域 import cv2 import numpy as np img cv2.imread("image.jpg") print(img[3,5]) # 显示某位置(行3列5)的像素值( 如 [53 34 29] 它是有三通道 B G R 组成) img[3,5] (0,0,255) # 更改该位置的像素…

学习虚幻C++开发日志——定时器

官方文档&#xff1a;虚幻引擎中的Gameplay定时器 | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 定时器 安排在经过一定延迟或一段时间结束后要执行的操作。例如&#xff0c;您可能希望玩家在获取某个能力提升道具后变得无懈可击&#xff0c;…

网络安全设备Bypass功能介绍及分析

网络安全平台厂商往往需要用到一项比较特殊的技术&#xff0c;那就是Bypass&#xff0c;那么到底什么是Bypass呢&#xff0c;Bypass设备又是如何来实现的&#xff1f;下面我就对Bypass技术做一下简单的介绍和说明。 一、 什么是Bypass。 大家知道&#xff0c;网络安全设备一般…