当前位置：首页 > news >正文

Flutter系列教程之(5)——常用控件Widget的使用示例

news 来源：原创 2025/9/14 6:44:30

1.页面跳转

2.某个控件设置点击事件

3.AlertDialog对话框的使用

4.文本输入框

5.按钮

圆角扁平按钮:

圆角悬浮按钮:

6.补充

圆点

7.布局使用

Row控件左右对齐

调整边距

1.页面跳转

首先，先介绍一下页面跳转功能吧

Flutter使用 Navigator 进行页面的跳转，如下例子，从当前页面跳转到SnackBarPage页面：

Navigator.push(context, new MaterialPageRoute(builder: (context) => new SnackBarPage()),);

我们可以简单的封装一下

import 'package:flutter/material.dart';class NavigatorUtil{///跳转到指定页面static Future push(BuildContext context, Widget page) {return Navigator.push(context, MaterialPageRoute(builder: (context) => page));}/// 返回到之前的页面static popToBeforePage(BuildContext context, int index) {int saveIndex = 0;return Navigator.of(context).popUntil((route) {if (saveIndex == index) {return true;} else {saveIndex ++;return false;}});}
}

2.某个控件设置点击事件

在Android原生开发中,由于所有的组件都是继承View,所有都具有setOnClickListener()的方法,用来设置点击事件,而Flutter中则是采用InkWell的Widget来实现

我们想要某个Widget具有点击事件,则用InkWell包裹它即可,如下例子:

InkWell(child: Text("hello"),onTap: () {print('hh');});

3.AlertDialog对话框的使用

对话框也是我们常用的控件,看看是怎么使用的吧

showDialog<void>(context: context,barrierDismissible: true,builder: (BuildContext dialogContext) {return AlertDialog(title: Text("提示"),content: Text("确定删除当前的知识库?"),actions: [FlatButton(child: Text("取消"),onPressed: () {Navigator.of(context).pop(); //关闭对话框},),FlatButton(child: Text("确定"),onPressed: () {Navigator.of(context).pop(); //关闭对话框print('删除成功');})]);},);

4.文本输入框

长文本的输入框,当输入过长则会换行,效果图如下:

Container(padding: EdgeInsets.all(10),child: TextField(//controller: detailAddressController,keyboardType: TextInputType.multiline,maxLines: 5,minLines: 3,decoration: InputDecoration(border: InputBorder.none,hintText: '详细地址',hintStyle: TextStyle(fontSize: 14))),
)

接收的时候需要传递Controller参数

var detailAddressController = TextEditingController();

获取内容:

//获取内容
detailAddressController.text.toString();
//修改内容
detailAddressController.text = "hello";
//清除内容
detailAddressController.clear();

5.按钮

textColor是文本颜色,color则是按钮的背景颜色

圆角扁平按钮:

FlatButton(textColor: Colors.white,color: Colors.blue,child: Text('搜索'),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),onPressed: () {},)

圆角悬浮按钮:

RaisedButton(child: Text('圆角按钮'),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25),),onPressed: () {},
)

6.补充

圆点

Container(width: 7,height: 7,child: CircleAvatar(backgroundColor: Colors.red,radius: 1,))

7.布局使用

Row控件左右对齐

new Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [new Text("left"),new Text("right")]
);Row(children: <Widget>[FlutterLogo(),//左对齐Expanded(child: SizedBox()),//自动扩展挤压FlutterLogo(),//右对齐],
);Row(children: <Widget>[FlutterLogo(),Spacer(),FlutterLogo(),],
);Row(children: <Widget>[FlutterLogo(),Flexible(fit: FlexFit.tight, child: SizedBox()),FlutterLogo(),],
);

调整边距

flutter提供了Container控件,让我们可以调整控件Widget的边距(内边距和外边距)

Container(child: new Text("left"),padding: EdgeInsets.only(left: 20),margin: EdgeInsets.only(right: 10),)

效果图:

Flutter系列教程之(5)——常用控件Widget的使用示例

目录 1.页面跳转 2.某个控件设置点击事件 3.AlertDialog对话框的使用 4.文本输入框 5.按钮圆角扁平按钮: 圆角悬浮按钮: 6.补充圆点 7.布局使用 Row控件左右对齐调整边距 1.页面跳转首先，先介绍一下页面跳转功能吧 Flutter使用 Navigator 进行页面…...

编程日记 2025/9/14 6:44:30

快手前端通用静态托管服务KFX演进历程：从崎岖土路到平坦高速

快手静态部署托管服务（KFX）历经四年发展，经历了三个阶段，一步步从勉强能行车的“崎岖土路”到现在多车道并行的“平坦高速”，这一转变极大地提升了资源利用率和效率，满足业务的实际需要。本文将带你了解其背…...

编程日记 2025/9/10 14:19:40

hackmyvm-buster

题目地址信息收集主机发现 ┌──(root㉿kali)-[/home/kali] └─# arp-scan -I eth1 192.168.56.0/24 Interface: eth1, type: EN10MB, MAC: 00:0c:29:34:da:f5, IPv4: 192.168.56.103 WARNING: Cannot open MAC/Vendor file ieee-oui.txt: Permission denied WARNING: C…...

编程日记 2025/9/10 9:40:39

React加TypeScript最新部署完整版

React TypeScript 全流程部署指南一、环境准备与项目初始化关于node.js及npm的安装请参见我的文章。 1.1 创建项目（React TypeScript） # 使用官方推荐脚手架（Vite 5.x） npx create-vitelatest my-app --template react-ts …...

编程日记 2025/9/9 12:02:39

DeepSeek-R1-Zero：基于基础模型的强化学习

注：此文章内容均节选自充电了么创始人，CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》（人工智能科学与技术丛书）【陈敬雷编著】【清华大学出版社】文章目录 DeepSeek大模型技术系列四DeepSeek大模型技术系列四》DeepSeek-…...

编程日记 2025/9/10 14:05:51

python的列表和元组别再傻傻分不清啦

目录什么是下标： 正数索引：正数索引从左到右，从 0 开始。负数索引：负数索引从右到左，从 -1 开始。切片（slice）：除了单个元素，Python还支持通过切片访问序列的子集。…...

编程日记 2025/9/13 6:53:41

Fiddler在Windows下抓包Https

文章目录 1.Fiddler Classic 配置2.配置浏览器代理自动代理手动配置浏览器代理 3.抓取移动端 HTTPS 流量（可选）解决抓取 HTTPS 失败问题1.Fiddler证书过期了默认情况下，Fiddler 无法直接解密 HTTPS 流量。需要开启 HTTPS 解密： 1…...

编程日记 2025/9/13 21:42:05

【超详细】神经网络的可视化解释

《------往期经典推荐------》一、AI应用软件开发实战专栏【链接】项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

编程日记 2025/9/7 12:47:13

LVS+Keepalived 高可用集群搭建

一、高可用集群： 1.什么是高可用集群： 高可用集群（High Availability Cluster）是以减少服务中断时间为目地的服务器集群技术它通过保护用户的业务程序对外不间断提供的服务，把因软件、硬件、人为造成的故障对业务的影响…...

编程日记 2025/9/10 10:58:34

使用git管理uniapp项目

1.本地管理 1. 在项目根目录中新建 .gitignore 忽略文件，并配置如下： # 忽略 node_modules 目录 /node_modules /unpackage/dist 2. 打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库&#xff1…...

编程日记 2025/9/12 3:02:06

回调函数的用法

回调函数的基本用法回调函数是一种被作为参数传递给另一个函数的函数，接收回调函数作为参数的函数在合适的时候会调用这个回调函数。回调函数为代码提供了更高的灵活性和可扩展性，下面为你详细介绍回调函数的基本用法。基本概念回调函数的核心在于函…...

编程日记 2025/9/12 21:09:35

样式垂直居中，谁才是王者

样式垂直居中，谁才是王者面试官常问如何让元素垂直居中，这其实是个经典的前端问题。实现垂直居中的方法多种多样，从传统的表格布局到现代的Flexbox、Grid布局，再到绝对定位配合transform，甚至是line-height技巧&am…...

编程日记 2025/9/9 20:20:26

五、Three.js顶点UV坐标、纹理贴图

一部分来自1. 创建纹理贴图 | Three.js中文网 ，一部分是自己的总结。一、创建纹理贴图注意：把一张图片贴在模型上就是纹理贴图 1、纹理加载器TextureLoader 注意：将图片加载到加载器中通过纹理贴图加载器TextureLoader的load()方法加…...

编程日记 2025/9/11 17:28:11

Linux Kernel Connection Tracking Table

在 Linux 内核中，连接跟踪表（Connection Tracking Table，简称 conntrack）是一个用于跟踪网络连接状态的核心组件。它主要由 Netfilter 框架管理，广泛应用于防火墙、NAT（网络地址转换）和负载均衡…...

编程日记 2025/9/10 22:56:32

NavVis VLX三维扫描：高层建筑数字化的革新力量【沪敖3D】

在三维激光扫描领域，楼梯结构因其复杂的空间形态和连续垂直移动的实际需求，一直是技术难点之一。利用NavVis VLX穿戴式移动扫描系统成功完成一栋34层建筑的高效扫描，其中楼梯部分的数据一遍成形且无任何分层或形变。本文将深入分析该项目的技…...

编程日记 2025/9/10 21:22:32

JVM生产环境问题定位与解决实战（二）：JConsole、VisualVM到MAT的高级应用

生产问题定位指南：几款必备的可视化工具引言在上一篇文章中，详细的介绍了JDK自带的一系列命令行工具，，如jps、jmap、jstat、jstack以及jcmd等，这些工具为排查和诊断Java虚拟机（JVM）问题提供…...

编程日记 2025/9/11 20:47:01

【深入理解JWT】从认证授权到网关安全

最近的项目学习中，在进行登陆模块的用户信息验证这一部分又用到了JWT的一些概念和相关知识，特在此写了这篇文章、方便各位笔者理解JWT相关概念目录先来理解JWT是什么？ 区分有状态认证和无状态认证有状态认证 VS 无状态认证 JWT令牌的…...

编程日记 2025/9/10 9:56:26

esp工程报错：something went wrong when trying to build the project esp-idf 一种解决办法

最近上手了正点原子esp32s3板子，环境采用的是vscodeesp-idf插件。导入了正点原子的demo测试，每次都报这个错误无法建造。也不是网上说的ninja error，不是中文路径的问题。在终端中查看，发现是缺少了git。（我这里没有…...

编程日记 2025/8/16 10:53:22

基于MATLAB红外弱小目标检测MPCM算法复现

摘要：本文详细介绍了一种基于人类视觉系统特性的红外弱小目标检测算法——Multiscale patch-based contrast measure (MPCM)。该算法通过增强目标与背景的对比度，有效检测红外图像中的弱小目标，并在MATLAB环境中进行了复现与实验验证。关键…...

编程日记 2025/9/12 5:33:00

java基础面试篇

目录 1.概念 1.1说一下Java的特点 1.2Java为什么是跨平台的？ 1.3 JVM、JDK、JRE三者关系？ 1.4为什么Java解释和编译都有？ 1.5 jvm是什么？ 1.6 编译型语言和解释型语言的区别？ 1.7 Python和Java区别是什么&#…...

编程日记 2025/9/9 1:12:16

Java Map实现类面试题

Java Map实现类面试题 HashMap Q1: HashMap的实现原理是什么？ HashMap基于哈希表实现，使用数组链表红黑树（Java 8）的数据结构。 public class HashMapPrincipleExample {// 模拟HashMap的基本结构public class SimpleHashMap&…...

编程日记 2025/9/11 16:05:51

Vue2+Three.js加载并展示一个三维模型（提供Gitee源码）

目录一、案例截图二、安装Three.js 三、代码实现四、Gitee源码一、案例截图二、安装Three.js npm install three 三、代码实现模型资源我是放在public文件夹下面的： 完整代码： <template><div><div ref"container&qu…...

编程日记 2025/9/12 7:01:25

Spark内存并行计算框架

spark核心概念 spark集群架构 spark集群安装部署 spark-shell的使用通过IDEA开发spark程序 1. Spark是什么 Apache Spark™ is a unified analytics engine for large-scale data processingspark是针对于大规模数据处理的统一分析引擎 spark是在Hadoop基础上的改进&…...

编程日记 2025/9/12 0:48:33

DeepSeek等LLM对网络安全行业的影响

大家好，我是AI拉呱，一个专注于人工智领域与网络安全方面的博主，现任资深算法研究员一职，兼职硕士研究生导师；热爱机器学习和深度学习算法应用，深耕大语言模型微调、量化、私域部署。曾获多次获得AI竞赛大奖，拥有多项发明专利和学术论文。对于AI算法有自己独特见解和经验…...

编程日记 2025/9/9 14:30:54

【QT】QLinearGradient 线性渐变类简单使用教程

目录 0.简介 1）qtDesigner中 2）实际执行 1.功能详述 3.举一反三的样式 0.简介 QLinearGradient 是 Qt 框架中的一个类，用于定义线性渐变效果（通过样式表设置）。它可以用来填充形状、背景或其他图形元素&#xff0…...

编程日记 2025/9/13 22:18:28

可狱可囚的爬虫系列课程 15：防盗链反爬虫的处理

一、防盗链了解防盗链是一种技术手段，主要用于防止其他网站通过直接链接的方式使用本网站的资源（如图片、文件等），从而节省带宽和服务器资源。当其他网站尝试直接链接到受保护的资源时，服务器会根据设置的规则判断请求…...

编程日记 2025/9/12 22:58:25

Vue组件：从使用到原理的深度解析

一、什么是Vue组件？ 组件是Vue的核心特性之一，它允许开发者将UI拆分为独立可复用的代码片段。每个组件本质上是一个Vue实例，具有自己的： 模板（Template） 数据（Data） 方法&#xf…...

编程日记 2025/9/7 17:20:55

SpringBoot接入DeepSeek（硅基流动版）+ 前端页面调试

文章目录前言正文一、项目环境二、项目代码2.1 pom.xml2.2 DeepSeekController.java2.3 启动类2.4 logback-spring.xml2.5 application.yaml2.6 index.html 三、页面调试3.1 参数提示3.2 开始请求3.3 手动断开前言作为一个Java程序员，了解前沿科技技术&#xff…...

编程日记 2025/9/12 7:54:55

Lua的table(表)

Lua表的基本概念 Lua中的表（table）是一种多功能数据结构，可以用作数组、字典、集合等。表是Lua中唯一的数据结构机制，其他数据结构如数组、列表、队列等都可以通过表来实现。表的实现 Lua的表由两部分组成： 数组部分…...

编程日记 2025/9/13 7:26:24

图片爬取案例

修改前的代码但是总显示“失败” 原因是修改之后的代码 import requests import os from urllib.parse import unquote# 原始URL url https://cn.bing.com/images/search?viewdetailV2&ccidTnImuvQ0&id5AE65CE4BE05EE7A79A73EEFA37578E87AE19421&thidOIP.TnI…...

编程日记 2025/9/9 17:11:31

【Python爬虫(90)】以Python爬虫为眼，洞察金融科技监管风云

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取，还涉及数据处理与分析。无论是新手小白还是进阶开发…...

编程日记 2025/9/11 5:55:58

idea + Docker + 阿里镜像服务打包部署

一、下载docker desktop软件官网下载docker desktop，需要结合wsl使用启动成功的画面(如果不是这个画面例如一直处理start或者是stop需要重新启动，不行就重启电脑) 打包成功的镜像在这里，如果频繁打包会导致磁盘空间被占满，需…...

编程日记 2025/9/13 14:41:50

C#模拟退火算法

模拟退火算法：寻找最优解的神奇 “退火之旅” 在生活中，我们都见过铁匠打铁。铁匠把烧得通红的铁块不断捶打，然后慢慢冷却，这样打造出来的金属制品才更坚固耐用。模拟退火算法就从这个退火过程中获得灵感，在计算机的数…...

编程日记 2025/9/10 0:22:05

网络安全防御模型

目录 6.1 网络防御概述一、网络防御的意义二、被动防御技术和主动防御技术三、网络安全纵深防御体系四、主要防御技术 6.2 防火墙基础一、防火墙的基本概念二、防火墙的位置 1.防火墙的物理位置 2.防火墙的逻辑位置 3. 防火墙的不足三、防火墙技术类型四…...

编程日记 2025/9/8 3:55:28

APP自动化实战

APP自动化能做什么？ 请看示例（实现批量的视频，封面功能复用能力（实现效果参考抖音号：71403700901） APP自动化实战－操作剪映APP PO模式 1. PO模式介绍 PO（Page Object）…...

编程日记 2025/9/9 18:07:32

Unity基础——资源导入

一.资源来源 1.Assert Store（Unity资源官方网站） （1）用于制作游戏的优质资源 | Unity Asset Store （2）或则通过Unity项目打开 2.外部资源 （1）淘宝 （2）找外…...

编程日记 2025/9/8 21:11:16

JMeter性能问题

性能测试中TPS上不去的几种原因性能测试中TPS上不去的几种原因_tps一直上不去-CSDN博客网络带宽连接池垃圾回收机制压测脚本通信连接机制数据库配置硬件资源压测机业务逻辑系统架构 CPU过高什么原因性能问题分析-CPU偏高 - 西瓜汁拌面 - 博客园 US C…...

编程日记 2025/9/10 6:37:07

形式化数学编程在AI医疗中的探索路径分析

一、引言 1.1 研究背景与意义在数字化时代，形式化数学编程和 AI 形式化医疗作为前沿领域，正逐渐改变着我们的生活和医疗模式。形式化数学编程是一种运用数学逻辑和严格的形式化语言来描述和验证程序的技术，它通过数学的精确性和逻辑性，确保程序的正确性和可靠性。在软件…...

编程日记 2025/8/31 19:06:51

DeepSeek开源周Day1：FlashMLA引爆AI推理性能革命！

项目地址：GitHub - deepseek-ai/FlashMLA 开源日历：2025-02-24起每日9AM(北京时间)更新，持续五天！ 一、开源周震撼启幕继上周预告后，DeepSeek于北京时间今晨9点准时开源「FlashMLA」，打响开源周五连…...

编程日记 2025/9/10 13:14:20

nginx 配置https

参考文档：nginx 文档 -- nginx官网|nginx下载安装|nginx配置|nginx教程配置 HTTPS 服务器 HTTPS 服务器优化 SSL 证书链单个 HTTP/HTTPS 服务器基于名称的 HTTPS 服务器具有多个名称的 SSL 证书服务器名称指示兼容性要配置 HTTPS 服务器，ssl…...

编程日记 2025/9/9 7:16:15

GhostBottleneck； InvertedResidual；Squeeze and Excite 是什么，怎么用

GhostBottleneck； InvertedResidual；Squeeze and Excite 是什么，怎么用目录 GhostBottleneck； InvertedResidual；Squeeze and Excite 是什么，怎么用GhostBottleneckInvertedResidualSqueeze and Excite（SE）GhostBottleneck 概念： GhostBottleneck 是在轻量级神经网…...

编程日记 2025/9/14 4:29:39

Docker启动ES容器打包本地镜像

文章目录 1、安装 Docker2、下载镜像3、查看已下载的镜像4、保存和加载镜像5、.tar 文件与 Docker 镜像的关系6、如何从 .tar 文件加载 Docker 镜像7、为什么需要 .tar 文件？8、ES 8.x版本无法启动8.1 问题原因8.2 解决方案8.3 提交容器为新镜像 1、安装 Docker 如…...

编程日记 2025/9/7 14:10:21

XXE漏洞：原理、危害与修复方法详解

目录一、XXE漏洞概述二、XXE漏洞原理三、XXE漏洞危害1. 任意文件读取2. 命令执行3. 拒绝服务攻击（DoS）4. SSRF攻击四、XXE漏洞修复方法1. 禁用外部实体JavaPythonPHP2. 输入验证和过滤3. 安全配置服务器4. 升级解析器版本五、总结一、XXE漏洞概述 XXE（XML External Entity…...

编程日记 2025/9/12 9:40:42

android keystore源码分析

架构 Android Keystore API 和底层 Keymaster HAL 提供了一套基本的但足以满足需求的加密基元，以便使用访问受控且由硬件支持的密钥实现相关协议。 Keymaster HAL 是由原始设备制造商 (OEM) 提供的动态加载库，密钥库服务使用它来提供由硬件支持的加密服…...

编程日记 2025/9/12 19:23:36

状态模式

状态（State）模式属于行为型模式的一种。状态模式允许对象在其内部状态改变时改变其行为，使其看上去就像改变了自身所属的类一样。状态模式是为了把一大串if...else...的逻辑给分拆到不同的状态类中，使得将来增加状态比较容易。…...

编程日记 2025/9/11 8:48:02

C++ | 面向对象 | 类

👻类 👾语法格式 class className{Access specifiers: // 访问权限DataType variable; // 变量returnType functions() { } // 方法 };👾访问权限 class className {public:// 公有成员protected:// 受保护成员private:// 私有成员 }…...

编程日记 2025/9/13 12:40:32

鸿蒙-AVPlayer

compileVersion 5.0.2（14） 音频播放 import media from ohos.multimedia.media; import common from ohos.app.ability.common; import { BusinessError } from ohos.base;Entry Component struct AudioPlayer {private avPlayer: media.AVPlayer | nu…...

编程日记 2025/9/8 13:29:30