Flutter 常用控件大全：从入门到实战，全面掌握 UI 开发

ops/2025/3/15 8:39:18/

本文详细整理了 Flutter 中 50+ 常用控件，涵盖文本、布局、按钮、列表、动画等核心组件。每个控件均附有 属性说明 和 实战代码示例，帮助你快速掌握 Flutter UI 开发的精髓。无论你是初学者还是进阶开发者，本文都能为你提供实用的参考和指导，助你轻松构建美观、高效的 Flutter 应用！

1. Text

用于显示文本内容。

属性：

  • text: 显示的文本内容。
  • style: 文本样式（字体大小、颜色、粗细等）。

示例：

Text('Hello, Flutter!',style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold,color: Colors.blue,),
)

2. Container

用于布局和装饰，可以设置宽度、高度、边距、背景色等。

属性：

  • width 和 height: 容器的宽度和高度。
  • margin 和 padding: 外边距和内边距。
  • decoration: 装饰（背景色、边框、圆角等）。

示例：

Container(width: 200,height: 100,margin: EdgeInsets.all(10),padding: EdgeInsets.all(20),decoration: BoxDecoration(color: Colors.amber,borderRadius: BorderRadius.circular(10),),child: Text('Container'),
)

3. Row 和 Column

用于水平（Row）和垂直（Column）排列子控件。

属性：

  • mainAxisAlignment: 主轴对齐方式（如 MainAxisAlignment.spaceEvenly）。
  • crossAxisAlignment: 交叉轴对齐方式（如 CrossAxisAlignment.start）。

示例：

Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Text('Item 1'),Text('Item 2'),Text('Item 3'),],
)Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Text('Item 1'),Text('Item 2'),Text('Item 3'),],
)

4. ListView

用于显示可滚动的列表。

属性：

  • children: 列表项。
  • scrollDirection: 滚动方向（默认垂直）。

示例：

ListView(children: [ListTile(title: Text('Item 1'),),ListTile(title: Text('Item 2'),),ListTile(title: Text('Item 3'),),],
)

5. GridView

用于显示网格布局。

属性：

  • crossAxisCount: 每行的列数。
  • children: 网格项。

示例：

GridView.count(crossAxisCount: 2,children: List.generate(10, (index) {return Center(child: Text('Item $index'),);}),
)

6. Button

用于触发操作，如 ElevatedButton、TextButton、IconButton 等。

属性：

  • onPressed: 点击事件回调。
  • child: 按钮内容。

示例：

ElevatedButton(onPressed: () {print('Button Pressed');},child: Text('Click Me'),
)IconButton(icon: Icon(Icons.thumb_up),onPressed: () {print('Icon Button Pressed');},
)

7. TextField

用于接收用户输入。

属性：

  • decoration: 输入框装饰（如标签、边框）。
  • onChanged: 输入内容变化时的回调。

示例：

TextField(decoration: InputDecoration(labelText: 'Enter your name',border: OutlineInputBorder(),),onChanged: (text) {print('User input: $text');},
)

8. Image

用于显示图片。

属性：

  • src: 图片路径（网络或本地）。
  • width 和 height: 图片尺寸。
  • fit: 图片填充方式（如 BoxFit.cover）。

示例：

Image.network('https://example.com/image.jpg',width: 200,height: 200,fit: BoxFit.cover,
)

9. AppBar

用于显示应用栏。

属性：

  • title: 标题。
  • actions: 右侧操作按钮。

示例：

Scaffold(appBar: AppBar(title: Text('My App'),actions: [IconButton(icon: Icon(Icons.search),onPressed: () {print('Search');},),],),body: Center(child: Text('Hello, Flutter!'),),
)

10. BottomNavigationBar

用于底部导航栏。

属性：

  • items: 导航项。
  • currentIndex: 当前选中的索引。
  • onTap: 点击事件回调。

示例：

Scaffold(bottomNavigationBar: BottomNavigationBar(items: const [BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),BottomNavigationBarItem(icon: Icon(Icons.business),label: 'Business',),BottomNavigationBarItem(icon: Icon(Icons.school),label: 'School',),],currentIndex: 0,onTap: (index) {print('Selected index: $index');},),body: Center(child: Text('Hello, Flutter!'),),
)

11. SnackBar

用于显示轻量级的提示信息。

属性：

  • content: 提示内容。
  • duration: 显示时长。

示例：

Scaffold(body: Center(child: ElevatedButton(onPressed: () {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('This is a SnackBar!'),),);},child: Text('Show SnackBar'),),),
)

12. AlertDialog

用于显示对话框。

属性：

  • title: 对话框标题。
  • content: 对话框内容。
  • actions: 操作按钮。

示例：

showDialog(context: context,builder: (BuildContext context) {return AlertDialog(title: Text('Alert'),content: Text('This is an alert dialog.'),actions: [TextButton(onPressed: () {Navigator.of(context).pop();},child: Text('OK'),),],);},
);

13. Stack

用于将多个控件叠加在一起。

属性：

  • children: 子控件。

示例：

Stack(children: [Container(width: 200,height: 200,color: Colors.red,),Positioned(top: 50,left: 50,child: Container(width: 100,height: 100,color: Colors.blue,),),],
)

14. Expanded

用于在 Row 或 Column 中扩展子控件。

属性：

  • flex: 扩展比例。

示例：

Row(children: [Expanded(flex: 2,child: Container(color: Colors.red,height: 100,),),Expanded(flex: 1,child: Container(color: Colors.blue,height: 100,),),],
)

15. FutureBuilder

用于处理异步数据并构建 UI。

属性：

  • future: 异步任务。
  • builder: 根据任务状态构建 UI。

示例：

FutureBuilder<String>(future: fetchData(),builder: (context, snapshot) {if (snapshot.connectionState == ConnectionState.waiting) {return CircularProgressIndicator();} else if (snapshot.hasError) {return Text('Error: ${snapshot.error}');} else {return Text('Data: ${snapshot.data}');}},
)

16. StreamBuilder

用于处理流数据并构建 UI。

属性：

  • stream: 数据流。
  • builder: 根据流数据构建 UI。

示例：

StreamBuilder<int>(stream: streamCounter(),builder: (context, snapshot) {if (snapshot.hasData) {return Text('Count: ${snapshot.data}');} else {return Text('No data');}},
)

17. GestureDetector

用于处理手势事件。

属性：

  • onTap: 点击事件回调。
  • child: 子控件。

示例：

GestureDetector(onTap: () {print('Tapped');},child: Container(width: 100,height: 100,color: Colors.green,child: Center(child: Text('Tap Me'),),),
)

18. Hero

用于实现页面之间的共享元素过渡动画。

属性：

  • tag: 共享元素的唯一标识。
  • child: 共享元素的内容。

示例：

Hero(tag: 'hero-tag',child: Image.network('https://example.com/image.jpg',width: 100,height: 100,),
)

19. AnimatedContainer

用于创建带有动画效果的容器。

属性：

  • duration: 动画时长。
  • width 和 height: 容器的宽度和高度。
  • color: 背景色。

示例：

AnimatedContainer(duration: Duration(seconds: 1),width: _width,height: _height,color: _color,child: Center(child: Text('Animated Container'),),
)

20. CustomPaint

用于自定义绘制。

属性：

  • painter: 自定义绘制逻辑。

示例：

CustomPaint(size: Size(200, 200),painter: MyCustomPainter(),
)

21. ClipRRect

用于裁剪控件为圆角矩形。

属性：

  • borderRadius: 圆角半径。
  • child: 子控件。

示例：

ClipRRect(borderRadius: BorderRadius.circular(20),child: Image.network('https://example.com/image.jpg',width: 200,height: 200,fit: BoxFit.cover,),
)

22. Transform

用于对控件进行变换（旋转、缩放、平移等）。

属性：

  • angle: 旋转角度。
  • child: 子控件。

示例：

Transform.rotate(angle: 45 * (3.141592653589793 / 180),child: Container(width: 100,height: 100,color: Colors.blue,),
)

23. Flexible

用于在 Row 或 Column 中灵活分配空间。

属性：

  • flex: 扩展比例。
  • child: 子控件。

示例：

Row(children: [Flexible(flex: 1,child: Container(color: Colors.red,height: 100,),),Flexible(flex: 2,child: Container(color: Colors.blue,height: 100,),),],
)

24. Spacer

用于在 Row 或 Column 中创建空白空间。

属性：

  • flex: 空白空间的比例。

示例：

Row(children: [Text('Left'),Spacer(),Text('Right'),],
)

25. Divider

用于添加分割线。

属性：

  • height: 分割线高度。
  • color: 分割线颜色。

示例：

Column(children: [Text('Item 1'),Divider(),Text('Item 2'),],
)

26. CircularProgressIndicator

用于显示加载指示器。

属性：

  • valueColor: 进度条颜色。

示例：

CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

27. LinearProgressIndicator

用于显示线性进度条。

属性：

  • value: 进度值（0 到 1 之间）。
  • valueColor: 进度条颜色。

示例：

LinearProgressIndicator(value: 0.5,valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
)

28. Checkbox

用于选择或取消选择选项。

属性：

  • value: 是否选中。
  • onChanged: 状态变化回调。

示例：

Checkbox(value: _isChecked,onChanged: (value) {setState(() {_isChecked = value!;});},
)

29. Radio

用于单选选项。

属性：

  • value: 单选值。
  • groupValue: 当前选中的值。
  • onChanged: 状态变化回调。

示例：

Radio(value: 1,groupValue: _selectedValue,onChanged: (value) {setState(() {_selectedValue = value!;});},
)

30. Switch

用于切换开关状态。

属性：

  • value: 开关状态。
  • onChanged: 状态变化回调。

示例：

Switch(value: _isSwitched,onChanged: (value) {setState(() {_isSwitched = value;});},
)

31. Slider

用于选择范围内的值。

属性：

  • value: 当前值。
  • min 和 max: 最小值和最大值。
  • onChanged: 值变化回调。

示例：

Slider(value: _sliderValue,min: 0,max: 100,onChanged: (value) {setState(() {_sliderValue = value;});},
)

32. DatePicker

用于选择日期。

属性：

  • initialDate: 初始���期。
  • firstDate 和 lastDate: 可选日期范围。

示例：

showDatePicker(context: context,initialDate: DateTime.now(),firstDate: DateTime(2000),lastDate: DateTime(2100),
).then((selectedDate) {if (selectedDate != null) {print('Selected Date: $selectedDate');}
});

33. TimePicker

用于选择时间。

属性：

  • initialTime: 初始时间。

示例：

showTimePicker(context: context,initialTime: TimeOfDay.now(),
).then((selectedTime) {if (selectedTime != null) {print('Selected Time: $selectedTime');}
});

34. Drawer

用于显示侧边栏。

属性：

  • child: 侧边栏内容。

示例：

Scaffold(drawer: Drawer(child: ListView(children: [DrawerHeader(child: Text('Drawer Header'),decoration: BoxDecoration(color: Colors.blue,),),ListTile(title: Text('Item 1'),onTap: () {print('Item 1 tapped');},),ListTile(title: Text('Item 2'),onTap: () {print('Item 2 tapped');},),],),),body: Center(child: Text('Hello, Flutter!'),),
)

35. TabBar

用于显示标签栏。

属性：

  • tabs: 标签项。
  • controller: 标签控制器。

示例：

DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(bottom: TabBar(tabs: [Tab(icon: Icon(Icons.home)),Tab(icon: Icon(Icons.business)),Tab(icon: Icon(Icons.school)),],),),body: TabBarView(children: [Center(child: Text('Home')),Center(child: Text('Business')),Center(child: Text('School')),],),),
)

36. Stepper

用于显示步骤指示器。

属性：

  • currentStep: 当前步骤。
  • steps: 步骤列表。

示例：

Stepper(currentStep: _currentStep,onStepContinue: () {setState(() {if (_currentStep < 2) {_currentStep += 1;}});},onStepCancel: () {setState(() {if (_currentStep > 0) {_currentStep -= 1;}});},steps: [Step(title: Text('Step 1'),content: Text('Content for Step 1'),),Step(title: Text('Step 2'),content: Text('Content for Step 2'),),Step(title: Text('Step 3'),content: Text('Content for Step 3'),),],
)

37. Chip

用于显示标签或选择项。

属性：

  • label: 标签内容。
  • onDeleted: 删除回调。

示例：

Chip(label: Text('Chip'),onDeleted: () {print('Chip deleted');},
)

38. Tooltip

用于显示提示信息。

属性：

  • message: 提示信息内容。
  • child: 子控件。

示例：

Tooltip(message: 'This is a tooltip',child: Text('Hover over me'),
)

39. RichText

用于显示富文本。

属性：

  • text: 富文本内容（使用 TextSpan 定义）。

示例：

RichText(text: TextSpan(text: 'Hello ',style: TextStyle(color: Colors.black),children: <TextSpan>[TextSpan(text: 'Flutter',style: TextStyle(color: Colors.blue,fontWeight: FontWeight.bold,),),],),
)

40. Wrap

用于自动换行的布局。

属性：

  • spacing: 子控件之间的间距。
  • runSpacing: 行之间的间距。
  • children: 子控件。

示例：

Wrap(spacing: 8.0,runSpacing: 4.0,children: List.generate(10, (index) {return Chip(label: Text('Item $index'),);}),
)

41. FadeInImage

用于显示带有淡入效果的图片。

属性：

  • placeholder: 占位图。
  • image: 目标图片。
  • fit: 图片填充方式。

示例：

FadeInImage.assetNetwork(placeholder: 'assets/placeholder.png',image: 'https://example.com/image.jpg',width: 200,height: 200,fit: BoxFit.cover,
)

42. PageView

用于显示可滑动的页面。

属性：

  • children: 页面内容。

示例：

PageView(children: [Center(child: Text('Page 1')),Center(child: Text('Page 2')),Center(child: Text('Page 3')),],
)

43. RefreshIndicator

用于下拉刷新。

属性：

  • onRefresh: 刷新回调。
  • child: 子控件。

示例：

RefreshIndicator(onRefresh: () async {await Future.delayed(Duration(seconds: 2));},child: ListView(children: [ListTile(title: Text('Item 1'),),ListTile(title: Text('Item 2'),),ListTile(title: Text('Item 3'),),],),
)

44. ClipOval

用于裁剪控件为圆形。

属性：

  • child: 子控件。

示例：

ClipOval(child: Image.network('https://example.com/image.jpg',width: 100,height: 100,fit: BoxFit.cover,),
)

45. ClipPath

用于自定义裁剪路径。

属性：

  • clipper: 自定义裁剪逻辑。
  • child: 子控件。

示例：

ClipPath(clipper: MyCustomClipper(),child: Container(width: 200,height: 200,color: Colors.blue,),
)

46. BackdropFilter

用于应用背景滤镜。

属性：

  • filter: 滤镜效果（如模糊）。
  • child: 子控件。

示例：

BackdropFilter(filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),child: Container(color: Colors.black.withOpacity(0.5),),
)

47. ShaderMask

用于应用着色器遮罩。

属性：

  • shaderCallback: 着色器逻辑。
  • child: 子控件。

示例：

ShaderMask(shaderCallback: (Rect bounds) {return LinearGradient(colors: [Colors.red, Colors.blue],).createShader(bounds);},child: Text('Shader Mask',style: TextStyle(fontSize: 24, color: Colors.white),),
)

48. AnimatedOpacity

用于创建带有动画效果的透明度变化。

属性：

  • opacity: 透明度值（0 到 1 之间）。
  • duration: 动画时长。
  • child: 子控件。

示例：

AnimatedOpacity(opacity: _opacity,duration: Duration(seconds: 1),child: Container(width: 200,height: 200,color: Colors.blue,),
)

49. AnimatedCrossFade

用于在两个控件之间创建交叉淡入淡出动画。

属性：

  • duration: 动画时长。
  • firstChild 和 secondChild: 两个子控件。
  • crossFadeState: 当前显示的控件。

示例：

AnimatedCrossFade(duration: Duration(seconds: 1),firstChild: Container(width: 200,height: 200,color: Colors.blue,),secondChild: Container(width: 200,height: 200,color: Colors.red,),crossFadeState: _showFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)

50. AnimatedBuilder

用于创建自定义动画。

属性：

  • animation: 动画控制器。
  • builder: 构建动画逻辑。
  • child: 子控件。

示例：

AnimatedBuilder(animation: _animationController,builder: (context, child) {return Transform.rotate(angle: _animationController.value * 2 * 3.141592653589793,child: child,);},child: Container(width: 100,height: 100,color: Colors.blue,),
)

总结

以上是 Flutter 中 50 个常用控件的详细说明和示例代码。通过灵活组合这些控件，你可以构建出功能丰富、界面美观的 Flutter 应用。希望这些内容对你有帮助！如果有其他问题，欢迎随时提问！


http://www.ppmy.cn/ops/165893.html

相关文章

韦伯望远镜的拉格朗日点计算推导过程，包含MATLAB和python运动轨迹仿真代码

韦伯望远镜的拉格朗日点计算推导过程，包含MATLAB和python运动轨迹仿真代码

研究过程 起源与提出&#xff1a;1687 年牛顿提出 “三体问题”&#xff0c;旨在研究三个可视为质点的天体在相互之间万有引力作用下的运动规律&#xff0c;但因运动方程过于复杂&#xff0c;难以得到完全解。欧拉的贡献1&#xff1a;1767 年&#xff0c;瑞士数学家莱昂哈德・…
阅读更多...
笔试刷题专题（一）

笔试刷题专题（一）

文章目录 最小花费爬楼梯&#xff08;动态规划&#xff09;题解代码 数组中两个字符串的最小距离&#xff08;贪心&#xff08;dp&#xff09;&#xff09;题解代码 点击消除题解代码 最小花费爬楼梯&#xff08;动态规划&#xff09; 题目链接 题解 1. 状态表示&#xff1…
阅读更多...
Python数据类型进阶——详解

Python数据类型进阶——详解

—— 小 峰 编 程 目录 1.整型 1.1 定义 1.2 独有功能 1.3 公共功能 1.4 转换 1.5 其他 1.5.1 长整型 1.5.2 地板除(除法&#xff09; 2. 布尔类型 2.1 定义 2.2 独有功能 2.3 公共功能 2.4 转换 2.5 其他 做条件自动转换 3.字符串类型 3.1 定义 3.2 独有功能…
阅读更多...
谷歌Chrome或微软Edge浏览器修改网页任意内容

谷歌Chrome或微软Edge浏览器修改网页任意内容

在谷歌或微软浏览器按F12&#xff0c;打开开发者工具&#xff0c;切换到console选项卡&#xff1a; 在下面的输入行输入下面的命令回车&#xff1a; document.body.contentEditable"true"效果如下&#xff1a;
阅读更多...
宇树与智元的崛起：机器人“灵魂”注入的技术密码

宇树与智元的崛起：机器人“灵魂”注入的技术密码

目录 机器人运动的基石&#xff1a;大扭矩与平衡术 大扭矩&#xff1a;力量的源泉 平衡术&#xff1a;动态平衡的艺术 从运动到智能&#xff1a;AI学习的“灵魂”注入 强化学习&#xff1a;试错中的成长 模仿学习&#xff1a;站在巨人的肩膀上 数据与知识共享&#xff1…
阅读更多...
安卓16“毕业季”：最后冲刺，全新体验即将登场

安卓16“毕业季”：最后冲刺，全新体验即将登场

在科技飞速发展的今天&#xff0c;谷歌安卓系统的每一次更新都备受全球用户和开发者的关注。近日&#xff0c;安卓 16 的发展迎来了一个重要的里程碑 ——Beta 3 版本正式上线&#xff0c;同时 API 接口也已锁定 。这一标志性事件意味着安卓 16 已经进入了平台稳定性阶段&#…
阅读更多...
设计模式学习笔记——命令模式

设计模式学习笔记——命令模式

2025年3月13日&#xff0c;周四下午 相同的保存逻辑在各个组件中重复出现。 且需要修改保存逻辑时&#xff0c;各个组件的保存逻辑都需要进行相应修改。 使用了命令模式把保存逻辑从三个组件中独立出来后&#xff0c;减少了代码冗余。 可以通过“保存命令”来使用保存逻辑&am…
阅读更多...
基于Hadoop的城市道路交通数据的可视化分析-Flask

基于Hadoop的城市道路交通数据的可视化分析-Flask

开发语言&#xff1a;Python框架&#xff1a;flaskPython版本&#xff1a;python3.8数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员功能界面 数据信息管理 数据信息修改 搜索功能 公告展示界面 公告修改…
阅读更多...
最新文章

Copyright @ 2022~2023