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

技术文档

本文详细整理了 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 应用。希望这些内容对你有帮助！如果有其他问题，欢迎随时提问！