Flutter基础 -- Flutter常用组件

Flutter 组件开发指南

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. 路由管理v1 Navigator

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应用上传工具，可以帮助开发者快速完成应用打包、证书管理和上传工作。

主要功能

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

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

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