一、常用组件

1.基础组件

组件 说明 示例
Text 显示文本 Text(‘Hello Flutter’, style: TextStyle(fontSize: 20))
Image 显示图片 Image.network(‘https://example.com/image.jpg’)
Icon 显示图标 Icon(Icons.home, size: 30, color: Colors.blue)
RaisedButton / ElevatedButton 按钮 ElevatedButton(onPressed: () {}, child: Text(‘Click’))
TextField 输入框 TextField(decoration: InputDecoration(labelText: ‘Name’))
1. Text：文本显示组件
  • 功能：用于显示一段文本。
  • 常用属性：
  • style：设置文本样式，如字体大小、颜色等。
  • textAlign：设置文本对齐方式。
  • maxLines：设置最大显示行数。
  • overflow：设置文本溢出处理方式，如省略号。
  • 示例
Text(
  'Flutter 组件配置详解',
  style: TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold),
  textAlign: TextAlign.center,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)
属性 类型 说明
data String 显示的文本内容
style TextStyle 字体大小、颜色、行高等
textAlign TextAlign 文本对齐（left、right、center、justify）
maxLines int 最大显示行数
overflow TextOverflow 溢出处理：ellipsis（省略号）等
2. Image：图片显示组件
  • 功能：用于显示图片，支持网络图片、本地图片等。
  • 常用属性：
  • image：图片资源，如 AssetImage、NetworkImage。
  • width、height：设置图片宽高。
  • fit：设置图片的适应方式，如填充、覆盖等。
  • 示例
Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 100,
  fit: BoxFit.cover,
  alignment: Alignment.center,
)
属性 类型 说明
image ImageProvider 图片数据，如 AssetImage, NetworkImage
width / height double 宽/高
fit BoxFit 缩放方式：fill、cover、contain、fitWidth、fitHeight
repeat ImageRepeat 是否重复显示图片
alignment Alignment 对齐方式
3. Icon：图标组件
  • 功能：用于显示图标。
  • 常用属性：
  • icon：图标数据，如 Icons.home。
  • size：图标大小。
  • color：图标颜色。
  • 示例 
    Icon(
  Icons.home,
  size: 30,
  color: Colors.green,
)
4. ElevatedButton：按钮组件
  • 功能：用于创建一个凸起的按钮。
  • 常用属性：
    • onPressed：按钮点击事件处理
    • child：按钮的子组件，通常是文本。
    • style：按钮样式，如背景色、形状等。
  • 示例：
	
ElevatedButton(
	  onPressed: () => print('Clicked'),
	  child: Text('提交'),
	  style: ElevatedButton.styleFrom(
	    primary: Colors.blue,
	    onPrimary: Colors.white,
	    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
	    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
	  ),
	)
属性 类型 说明
onPressed Function() 按钮点击事件
child Widget 按钮内容
style ButtonStyle 自定义样式：背景色、形状、边距
5.TextField：文本输入框组件
  • 功能：用于接收用户输入的文本。
  • 常用属性：
    • controller：控制器，用于获取输入内容。
    • decoration：输入框的装饰，如提示文本、边框等。
    • obscureText：是否隐藏输入内容，常用于密码输入。
  • 示例：
TextField(
  controller: _usernameController,
  obscureText: false,
  keyboardType: TextInputType.text,
  maxLength: 20,
  decoration: InputDecoration(
    labelText: '用户名',
    hintText: '请输入用户名',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print('输入内容：$value');
  },
)
属性 类型 说明
controller TextEditingController 控制器（获取/设置输入值）
decoration InputDecoration 输入框装饰
obscureText bool 是否隐藏内容（密码输入）
keyboardType TextInputType 键盘类型：text、number、email 等
maxLength int 最大输入长度
onChanged (value) => void 内容改变时的回调

2.布局组件

组件 说明 示例
Row / Column 横/纵向布局 Row(children: [Text(‘A’), Text(‘B’)])
Container 容器，可设大小、颜色、边距等 Container(width: 100, height: 100, color: Colors.red)
Padding 添加内边距 Padding(padding: EdgeInsets.all(8), child: Text(‘Padded’))
Expanded 撑满剩余空间 Expanded(child: Container(color: Colors.green))
Stack 叠层布局 Stack(children: […])
  • 其他组件
组件 说明 示例代码
Container 常用容器组件，支持 padding、margin、decoration Container(width: 100, margin: EdgeInsets.all(10))
Padding 仅设置内边距 Padding(padding: EdgeInsets.all(10), child: ...)
Align / Center 对齐子组件 Center(child: Text("中间"))
Row / Column 横向或纵向排列子组件 Row(children: [Text("A"), Text("B")])
Expanded 填满剩余空间 Expanded(child: Container(color: Colors.red))
SizedBox 固定宽高或空隙 SizedBox(height: 20)
Stack 组件层叠 Stack(children: [Container(), Positioned(...)])
Wrap 自动换行布局 Wrap(children: [...])
Spacer 占位间隔 Spacer(flex: 1)
1. Row 和 Column：线性布局组件
  • 功能：分别用于水平和垂直排列子组件。
  • 常用属性：
    • mainAxisAlignment：主轴对齐方式。
    • crossAxisAlignment：交叉轴对齐方式。
    • children：子组件列表。
  • 示例：
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
  ],
)
属性 类型 说明
children List<Widget> 子组件列表
mainAxisAlignment MainAxisAlignment 主轴对齐
crossAxisAlignment CrossAxisAlignment 交叉轴对齐
mainAxisSize MainAxisSize 主轴占用空间（max/min）
2. Container：容器组件
  • 功能：用于创建一个矩形可视区域，可设置大小、边距、边框、背景色等
  • 常用属性：
    • width、height：设置宽高。
    • padding、margin：内边距和外边距。
    • decoration：装饰，如背景色、边框等
  • 示例
	
Container(
  width: 200,
  height: 100,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.only(top: 20),
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.amber,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 4)],
  ),
  child: Text('我是容器'),
)
属性 类型 说明
width / height double 宽高
padding / margin EdgeInsets 内/外边距
decoration BoxDecoration 背景、边框、阴影、圆角等
alignment Alignment 子组件对齐方式
child Widget 子组件
3. Stack 和 Positioned：堆叠布局组件
  • 功能：用于堆叠多个子组件，可以通过 Positioned 精确定位。
  • 常用属性：
    • alignment：设置子组件的对齐方式。
    • children：子组件列表
  • 示例：
Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.green),
    Positioned(
      top: 20,
      left: 20,
      child: Container(width: 100, height: 100, color: Colors.red),
    ),
  ],
)
属性 类型 说明
alignment Alignment 默认子组件对齐方式
children List<Widget> 子组件列表
fit StackFit 子组件如何填充 Stack
CustomScrollView 滚动组件

复杂滚动页面，可组合多个 Sliver（静态+动态+吸顶）

CustomScrollView 适用场景
  • 首页复杂页面，比如：
  • 顶部轮播图
  • 宫格菜单
  • 限时活动
  • 吸顶一级/二级菜单
  • 底部商品瀑布流
CustomScrollView(
  slivers: [
    SliverToBoxAdapter(child: BannerWidget()),
    SliverToBoxAdapter(child: GridMenuWidget()),
    SliverPersistentHeader(
      pinned: true,
      delegate: StickyTabbarDelegate(),
    ),
    SliverStaggeredGrid.countBuilder(
      crossAxisCount: 2,
      itemCount: productList.length,
      itemBuilder: (context, index) => ProductItemWidget(product: productList[index]),
      staggeredTileBuilder: (index) => StaggeredTile.fit(1),
    ),
  ],
)

3.功能类组件

组件 说明 示例代码
AppBar 页面顶部导航栏 AppBar(title: Text("标题"))
BottomNavigationBar 底部导航栏 BottomNavigationBar(items: [...])
Drawer 抽屉菜单 Drawer(child: ListView(...))
TabBar / TabBarView 顶部选项卡 配合 TabController 使用
Navigator 页面跳转 Navigator.push(context, MaterialPageRoute(builder: (_) => Page()))
AlertDialog 弹窗对话框 showDialog(context: ..., builder: (_) => AlertDialog(...))
GestureDetector 手势识别 GestureDetector(onTap: () { ... })
1. ListView：可滚动的列表组件
  • 功能：用于显示一个可滚动的列
  • 常用属性：
    • children：子组件列表。
    • itemBuilder：用于懒加载子组件。
    • separatorBuilder：用于添加分隔线。
  • 示例：
ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.person),
      title: Text('Person $index'),
      subtitle: Text('Subtitle $index'),
    );
  },
)
属性 类型 说明
children List<Widget> 静态子组件列表
itemBuilder IndexedWidgetBuilder 构建子项
itemCount int 子项数量
scrollDirection Axis 滚动方向（horizontal, vertical）
2. GridView：网格布局组件
  • 功能：用于创建一个网格布局的可滚动列表
  • 常用属性：
    • gridDelegate：控制网格的布局方式。
    • children：子组件列表。
  • 示例：
GridView.count(
  crossAxisCount: 2,
  children: List.generate(4, (index) {
    return Center(
      child: Text(
        'Item $index',
        style: Theme.of(context).textTheme.headline5,
      ),
    );
  }),
)
属性 类型 说明
crossAxisCount int 横轴显示个数
mainAxisSpacing double 主轴间距
crossAxisSpacing double 横轴间距
childAspectRatio double 宽高比
3. Card：卡片组件
  • 功能：用于创建具有圆角和阴影的卡片效果。
  • 常用属性：
    • elevation：设置阴影的大小。
    • shape：设置卡片的形状。
    • child：卡片的子组件。
  • 示例：
Card(
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('This is a card'),
  ),
)

4. 状态管理类

  • setState()：最简单的本地状态更新方式
  • 插件方式：Provider、Riverpod、GetX、Bloc。

表单组件

组件 说明 示例代码
TextField 输入框 TextField(decoration: InputDecoration(labelText: '姓名'))
TextFormField 带验证的输入框 TextFormField(validator: (val) => val!.isEmpty ? '必填' : null)
Form 表单容器 Form(key: _formKey, child: Column(...))
Checkbox / CheckboxListTile 复选框 Checkbox(value: true, onChanged: ...)
Radio / RadioListTile 单选框 Radio(value: 1, groupValue: _val, onChanged: ...)
Switch 开关 Switch(value: true, onChanged: ...)
DropdownButton 下拉菜单 DropdownButton(items: [...], onChanged: ...)
Slider 滑块 Slider(value: 50, min: 0, max: 100, onChanged: ...)

5 屏幕适配方案

方案 描述 插件推荐
基于设计稿等比缩放 将 UI 尺寸按比例缩放适配 flutter_screenutil
MediaQuery 自适应 读取设备尺寸并调整布局 内置 MediaQuery.of(context)
LayoutBuilder 自适应 按父容器的尺寸动态布局 内置 LayoutBuilder(...)
响应式组件封装 根据屏幕宽度切换 UI responsive_framework、flutter_responsive

插件推荐：flutter_screenutil

dependencies:
  flutter_screenutil: ^5.5.3+2

使用实例

import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp(
    ScreenUtilInit(
      designSize: Size(375, 812), // 设计稿尺寸（例如 iPhone X）
      builder: (context, child) => MyApp(),
    ),
  );
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 100.w, // 屏幕适配宽度
          height: 100.h, // 屏幕适配高度
          child: Text('Hello', style: TextStyle(fontSize: 16.sp)), // 字体大小适配
        ),
      ),
    );
  }
}

其他适配逻辑

插件 功能 适合场景
flutter_screenutil 基于设计稿自动缩放 推荐用于大部分项目
responsive_builder 响应式断点布局 多平台（Web、Mobile）适配
flutter_responsive_framework 精准控制不同设备 UI 企业级适配
mediaquery_sizer 类似 screenutil，但更轻量 轻量项目可用

常用目录设计方案

lib/
├─ main.dart                 # 程序入口
├─ common/                   # 公共工具、样式、API
│   ├─ api.dart              # 接口请求统一管理
│   ├─ constants.dart        # 常量、枚举
│   ├─ utils/                # 工具类（日期、网络、加密等）
│   └─ styles/               # 主题、颜色、字体、全局样式
│
├─ widgets/                  # 全局可复用组件（跨页面）
│   ├─ custom_button.dart    # 通用按钮
│   ├─ empty_view.dart       # 空状态占位
│   ├─ loading_more.dart     # 加载更多动画
│   └─ custom_appbar.dart    # 顶部通用 AppBar
│
├─ pages/                    # 页面模块
│   ├─ home/                 # 首页模块
│   │   ├─ home_page.dart
│   │   ├─ widgets/          # 仅首页专属组件
│   │   │   ├─ notice_bar.dart
│   │   │   ├─ banner_carousel.dart
│   │   │   ├─ menu_grid.dart
│   │   │   ├─ waterfall_list.dart
│   │   │   └─ tab_section.dart
│   │   └─ home_controller.dart # 状态管理（Provider / Riverpod）
│   │
│   ├─ product/              # 商品模块
│   │   ├─ product_page.dart
│   │   ├─ widgets/          # 商品页面专属组件
│   │   │   ├─ product_card.dart
│   │   │   ├─ product_filter.dart
│   │   │   └─ product_banner.dart
│   │   └─ product_controller.dart
│   │
│   └─ mine/                 # 个人中心模块
│       ├─ mine_page.dart
│       └─ widgets/
│           └─ user_info_card.dart
│
└─ routes/                   # 路由统一管理
    └─ app_routes.dart

📌 结构说明

common/

放项目全局可用的工具、常量、样式和接口

类似前端的 utils/ 或 services/

widgets/

全局复用组件，不属于某个页面

例：按钮、加载动画、空状态组件

pages/

每个页面/模块独立一个目录

内部 widgets/ 只放该页面的专属组件

页面逻辑、状态管理、子组件都归属本模块

routes/

页面路由统一管理，便于导航和跳转

# flutter # javascript # 前端
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Flutter for OpenHarmony 商城App实战 - 商品详情实现

avatar 开源鸿蒙跨平台开发者社区

cix p1 OpenHarmony 6.0r 上使用mali g720调用vulkan进行端侧推理

笔者之前发布过此芯p1开发板使用OpenHarmony时llama.cpp不同优化速度对比(GPU vs CPU)的文章，使用的是一张amd的rx580显卡。理论上支持vulkan的GPU都可以使用vulkan后端的llama.cpp （GPU）进行端侧推理。

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony移动数据使用监管助手App实战 - WiFi详情实现

avatar 开源鸿蒙跨平台开发者社区