Flutter 自定义 Widget：打造独特的用户界面

Flutter 自定义 Widget打造独特的用户界面突破内置组件的局限创造属于你自己的 UI 组件。一、自定义 Widget 的意义作为一名追求像素级还原的 UI 匠人我深知内置组件的局限。有时候设计稿上的那个特殊按钮那个独特的布局只有通过自定义 Widget 才能完美实现。Flutter 提供了强大的 Widget 系统让我们能够创建出独特的、符合品牌调性的 UI 组件。二、基础StatelessWidget vs StatefulWidget1. 无状态 Widgetimport package:flutter/material.dart; class CustomButton extends StatelessWidget { final String text; final VoidCallback onPressed; final Color color; final double? width; final double? height; const CustomButton({ Key? key, required this.text, required this.onPressed, this.color const Color(0xFF667eea), this.width, this.height 44, }) : super(key: key); override Widget build(BuildContext context) { return Container( width: width, height: height, decoration: BoxDecoration( gradient: LinearGradient( colors: [color, color.withOpacity(0.8)], begin: Alignment.topLeft, end: Alignment.bottomRight, ), borderRadius: BorderRadius.circular(8), boxShadow: [ BoxShadow( color: color.withOpacity(0.3), spreadRadius: 1, blurRadius: 4, offset: Offset(0, 2), ), ], ), child: Material( color: Colors.transparent, child: InkWell( onTap: onPressed, borderRadius: BorderRadius.circular(8), child: Center( child: Text( text, style: TextStyle( color: Colors.white, fontSize: 16, fontWeight: FontWeight.w600, ), ), ), ), ), ); } } // 使用 class ButtonExample extends StatelessWidget { override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(自定义按钮)), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ CustomButton( text: 主要按钮, onPressed: () print(主要按钮点击), ), SizedBox(height: 16), CustomButton( text: 次要按钮, onPressed: () print(次要按钮点击), color: Color(0xFF764ba2), ), SizedBox(height: 16), CustomButton( text: 宽按钮, onPressed: () print(宽按钮点击), width: 200, ), ], ), ), ); } }2. 有状态 Widgetclass CounterWidget extends StatefulWidget { final int initialValue; final String label; const CounterWidget({ Key? key, this.initialValue 0, required this.label, }) : super(key: key); override _CounterWidgetState createState() _CounterWidgetState(); } class _CounterWidgetState extends StateCounterWidget { late int _count; override void initState() { super.initState(); _count widget.initialValue; } void _increment() { setState(() { _count; }); } void _decrement() { setState(() { if (_count 0) { _count--; } }); } override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(16), decoration: BoxDecoration( border: Border.all(color: Colors.grey[200]!), borderRadius: BorderRadius.circular(8), ), child: Column( children: [ Text( widget.label, style: TextStyle(fontSize: 16, fontWeight: 500), ), SizedBox(height: 16), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ FloatingActionButton( onPressed: _decrement, mini: true, child: Icon(Icons.remove), ), SizedBox(width: 24), Text( $_count, style: TextStyle(fontSize: 24, fontWeight: bold), ), SizedBox(width: 24), FloatingActionButton( onPressed: _increment, mini: true, child: Icon(Icons.add), ), ], ), ], ), ); } } // 使用 class CounterExample extends StatelessWidget { override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(自定义计数器)), body: Center( child: CounterWidget( label: 商品数量, initialValue: 1, ), ), ); } }三、高级自定义 Widget1. 可滚动标签页class ScrollableTabs extends StatefulWidget { final ListString tabs; final ListWidget children; const ScrollableTabs({ Key? key, required this.tabs, required this.children, }) : super(key: key); override _ScrollableTabsState createState() _ScrollableTabsState(); } class _ScrollableTabsState extends StateScrollableTabs { int _currentIndex 0; override Widget build(BuildContext context) { return Column( children: [ Container( height: 48, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: widget.tabs.length, itemBuilder: (context, index) { return GestureDetector( onTap: () { setState(() { _currentIndex index; }); }, child: Container( padding: EdgeInsets.symmetric(horizontal: 16), alignment: Alignment.center, decoration: BoxDecoration( borderBottom: BorderSide( color: _currentIndex index ? Color(0xFF667eea) : Colors.transparent, width: 2, ), ), child: Text( widget.tabs[index], style: TextStyle( color: _currentIndex index ? Color(0xFF667eea) : Colors.grey[600], fontWeight: _currentIndex index ? FontWeight.w600 : FontWeight.normal, ), ), ), ); }, ), ), Expanded( child: widget.children[_currentIndex], ), ], ); } } // 使用 class TabsExample extends StatelessWidget { override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(可滚动标签页)), body: ScrollableTabs( tabs: [首页, 推荐, 热门, 最新, 收藏], children: [ Center(child: Text(首页内容)), Center(child: Text(推荐内容)), Center(child: Text(热门内容)), Center(child: Text(最新内容)), Center(child: Text(收藏内容)), ], ), ); } }2. 自定义卡片class GradientCard extends StatelessWidget { final Widget child; final Gradient? gradient; final double borderRadius; final BoxShadow? shadow; const GradientCard({ Key? key, required this.child, this.gradient, this.borderRadius 12, this.shadow, }) : super(key: key); override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( gradient: gradient ?? LinearGradient( colors: [Color(0xFF667eea), Color(0xFF764ba2)], begin: Alignment.topLeft, end: Alignment.bottomRight, ), borderRadius: BorderRadius.circular(borderRadius), boxShadow: shadow ! null ? [shadow!] : [ BoxShadow( color: Colors.black.withOpacity(0.1), spreadRadius: 1, blurRadius: 8, offset: Offset(0, 4), ), ], ), child: Padding( padding: EdgeInsets.all(16), child: child, ), ); } } // 使用 class CardExample extends StatelessWidget { override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(自定义卡片)), body: Center( child: GradientCard( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 渐变卡片, style: TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, ), ), SizedBox(height: 8), Text( 这是一个带有渐变背景的自定义卡片组件支持自定义渐变颜色、圆角和阴影。, style: TextStyle( color: Colors.white.withOpacity(0.9), fontSize: 14, ), ), SizedBox(height: 16), ElevatedButton( onPressed: () {}, child: Text(了解更多), style: ElevatedButton.styleFrom( backgroundColor: Colors.white, foregroundColor: Color(0xFF667eea), ), ), ], ), ), ), ); } }3. 加载动画class CustomLoader extends StatefulWidget { final double size; final Color color; const CustomLoader({ Key? key, this.size 40, this.color const Color(0xFF667eea), }) : super(key: key); override _CustomLoaderState createState() _CustomLoaderState(); } class _CustomLoaderState extends StateCustomLoader with SingleTickerProviderStateMixin { late AnimationController _controller; late Animationdouble _animation; override void initState() { super.initState(); _controller AnimationController( duration: Duration(seconds: 1), vsync: this, )..repeat(); _animation Tweendouble(begin: 0, end: 1).animate( CurvedAnimation(parent: _controller, curve: Curves.easeInOut), ); } override Widget build(BuildContext context) { return AnimatedBuilder( animation: _animation, builder: (context, child) { return Transform.rotate( angle: _animation.value * 2 * 3.14159, child: Container( width: widget.size, height: widget.size, decoration: BoxDecoration( border: Border.all( color: widget.color.withOpacity(0.3), width: 2, ), borderTopColor: widget.color, borderRadius: BorderRadius.circular(widget.size / 2), ), ), ); }, ); } override void dispose() { _controller.dispose(); super.dispose(); } } // 使用 class LoaderExample extends StatelessWidget { override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(自定义加载动画)), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ CustomLoader(), SizedBox(height: 16), Text(加载中...), ], ), ), ); } }四、组合 Widget1. 表单字段class CustomFormField extends StatelessWidget { final String label; final String? hint; final TextEditingController controller; final String? Function(String?)? validator; final TextInputType keyboardType; final bool obscureText; const CustomFormField({ Key? key, required this.label, this.hint, required this.controller, this.validator, this.keyboardType TextInputType.text, this.obscureText false, }) : super(key: key); override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( label, style: TextStyle( fontSize: 14, fontWeight: 500, color: Colors.grey[700], ), ), SizedBox(height: 8), TextFormField( controller: controller, validator: validator, keyboardType: keyboardType, obscureText: obscureText, decoration: InputDecoration( hintText: hint, border: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: BorderSide(color: Colors.grey[300]!), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: BorderSide(color: Color(0xFF667eea), width: 2), ), filled: true, fillColor: Colors.grey[50], contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12), ), ), ], ); } } // 使用 class FormExample extends StatelessWidget { final _formKey GlobalKeyFormState(); final _emailController TextEditingController(); final _passwordController TextEditingController(); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(自定义表单字段)), body: Padding( padding: EdgeInsets.all(16), child: Form( key: _formKey, child: Column( children: [ CustomFormField( label: 邮箱, hint: 请输入邮箱地址, controller: _emailController, validator: (value) { if (value null || value.isEmpty) { return 请输入邮箱; } if (!RegExp(r^[^\s][^\s]\.[^\s]$).hasMatch(value)) { return 请输入有效的邮箱地址; } return null; }, keyboardType: TextInputType.emailAddress, ), SizedBox(height: 16), CustomFormField( label: 密码, hint: 请输入密码, controller: _passwordController, validator: (value) { if (value null || value.isEmpty) { return 请输入密码; } if (value.length 6) { return 密码长度至少 6 位; } return null; }, obscureText: true, ), SizedBox(height: 24), ElevatedButton( onPressed: () { if (_formKey.currentState!.validate()) { print(表单验证通过); } }, child: Text(提交), style: ElevatedButton.styleFrom( backgroundColor: Color(0xFF667eea), minimumSize: Size(double.infinity, 48), ), ), ], ), ), ), ); } }五、性能优化使用 const 构造器减少不必要的重建避免在 build 方法中创建对象将不变的对象提取到类变量使用 RepaintBoundary隔离重绘区域合理使用 setState只在必要时调用六、最佳实践封装性将相关逻辑封装到自定义 Widget 中可配置性提供足够的参数来自定义 Widget文档为自定义 Widget 添加清晰的文档测试为自定义 Widget 编写测试自定义 Widget 是创意的表达是界面的灵魂。#flutter #custom-widgets #ui #dart #frontend