Flutter基础 -- Flutter常用组件

Flutter 组件开发指南

目录

  1. 文本组件 Text
  2. 导入资源
  3. 图片组件 Image
  4. 图标组件 Icon
  5. 按钮组件
  6. 路由管理v1 Navigator
  7. 样式管理
  8. 手势事件
  9. 输入框 TextField

1. 文本组件 Text

Text Widget是Flutter中用于显示文本的基础组件,功能类似于Android的TextView或HTML的文本标签。

1.1 基础用法

dart 复制代码
Text('hello word!');

1.2 Text 定义

dart 复制代码
const Text(
  this.data,  // 要显示的文字内容
  {
    Key key,
    this.style,  // 文字显示样式和属性
    this.textAlign,  // 文字对齐方式
    this.textDirection,  // 文字显示方向
    this.maxLines,  // 最大显示行数
  }
)

1.3 Text 示例

dart 复制代码
Text('字体24下划线',
  style: TextStyle(
    color: Colors.blue,
    fontSize: 24,
    decoration: TextDecoration.underline,
  )
)

2. 导入资源

2.1 加入资源

在项目根目录下创建assets目录,然后按资源类型创建子目录。

编辑pubspec.yaml文件:

yaml 复制代码
flutter:
  assets:
    - assets/images/
    - assets/svgs/
    - assets/json/

3. 图片组件 Image

Image组件用于显示来自内存、本地、网络或Assets的图片。

3.1 基础用法

dart 复制代码
Image.asset('assets/images/logo.png')

4. 图标组件 Icon

Icon组件用于显示可缩放的矢量图标。

4.1 基础用法

dart 复制代码
Icon(
  Icons.campaign,
  size: 200,
  color: Colors.amber,
)

5. 按钮组件

5.1 ElevatedButton

dart 复制代码
ElevatedButton(
  onPressed: () {},
  child: Text('ElevatedButton'),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.yellow),
  ),
)

6.1 基本路由跳转

dart 复制代码
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailPage()),
);

7. 样式管理

7.1 ThemeData

dart 复制代码
MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.green,
    ),
  ),
)

8. 手势事件

8.1 GestureDetector

dart 复制代码
GestureDetector(
  onTap: () => print('点击'),
  child: Container(color: Colors.amber),
)

9. 输入框 TextField

9.1 基础用法

dart 复制代码
TextField(
  decoration: InputDecoration(labelText: '用户名'),
  onChanged: (value) => print(value),
)

iOS开发助手AppUploader

在开发Flutter应用时,如果需要发布到App Store,可以使用AppUploader工具来简化上传流程。AppUploader是一款专业的iOS应用上传工具,可以帮助开发者快速完成应用打包、证书管理和上传工作。

主要功能

  1. 自动打包iOS应用
  2. 管理开发证书和描述文件
  3. 一键上传到App Store Connect
  4. 支持批量操作多个应用
  5. 提供详细的日志记录

使用AppUploader可以显著提高iOS应用发布效率,特别适合需要频繁更新应用的开发者。

注意:本文所有代码示例都已在Flutter 3.0环境下测试通过。在实际开发中,建议使用最新稳定版的Flutter SDK以获得最佳体验。

相关推荐
Micro麦可乐1 分钟前
前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践
前端·spring boot·后端·jwt·refresh token·无感token刷新
方块海绵10 分钟前
浅析 MongoDB
后端
中东大鹅16 分钟前
SpringBoot配置外部Servlet
spring boot·后端·servlet
一语长情31 分钟前
从《架构整洁之道》看编程范式:结构化、面向对象与函数式编程精要
后端·架构·代码规范
rzl021 小时前
SpringBoot(黑马)
java·spring boot·后端
wenb1n1 小时前
【安全漏洞】防范未然:如何有效关闭不必要的HTTP请求方法,保护你的Web应用
后端
wenb1n1 小时前
【安全漏洞】网络守门员:深入理解与应用iptables,守护Linux服务器安全
后端
Pomelo_刘金1 小时前
单测原则与实践
后端
香饽饽~、1 小时前
[第十三篇] Spring Boot监控
java·spring boot·后端
硅基宙宇AIGC2 小时前
亲测鹅厂Codebuddy!抢到多个邀请码后发现了AI编程的天花板?(文末送码)
前端·后端