Flutter UI组件高级使用技巧-编程实验室

Flutter UI组件高级使用技巧

1. 核心概念

1.1 基础组件

Text：文本显示组件，支持富文本、样式设置
Container：容器组件，支持背景、边框、内边距等
Button：按钮组件，支持多种样式和交互
Image：图片显示组件，支持网络图片、本地图片
TextField：文本输入组件，支持各种输入类型

1.2 布局组件

Row/Column：水平/垂直布局
Stack：层叠布局
Expanded：弹性布局
GridView/ListView：列表和网格布局
Scaffold：基础页面布局

2. 高级技巧

2.1 自定义组件

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 = Colors.blue, this.width = double.infinity, this.height = 50, }) : super(key: key); @override Widget build(BuildContext context) { return SizedBox( width: width, height: height, child: ElevatedButton( onPressed: onPressed, style: ElevatedButton.styleFrom( backgroundColor: color, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), elevation: 4, shadowColor: color.withOpacity(0.5), ), child: Text( text, style: const TextStyle( fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white, ), ), ), ); } }

2.2 响应式设计

class ResponsiveWidget extends StatelessWidget { final Widget mobileWidget; final Widget tabletWidget; final Widget desktopWidget; const ResponsiveWidget({ Key? key, required this.mobileWidget, required this.tabletWidget, required this.desktopWidget, }) : super(key: key); @override Widget build(BuildContext context) { return LayoutBuilder( builder: (context, constraints) { if (constraints.maxWidth < 600) { return mobileWidget; } else if (constraints.maxWidth < 1200) { return tabletWidget; } else { return desktopWidget; } }, ); } }

2.3 动画效果

class AnimatedCard extends StatefulWidget { final Widget child; const AnimatedCard({Key? key, required this.child}) : super(key: key); @override _AnimatedCardState createState() => _AnimatedCardState(); } class _AnimatedCardState extends State<AnimatedCard> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _scaleAnimation; late Animation<double> _opacityAnimation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 500), vsync: this, ); _scaleAnimation = Tween<double>(begin: 0.8, end: 1).animate( CurvedAnimation(parent: _controller, curve: Curves.easeOut), ); _opacityAnimation = Tween<double>(begin: 0, end: 1).animate( CurvedAnimation(parent: _controller, curve: Curves.easeOut), ); _controller.forward(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (context, child) { return Transform.scale( scale: _scaleAnimation.value, child: Opacity( opacity: _opacityAnimation.value, child: child, ), ); }, child: Card( elevation: 4, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), ), child: Padding( padding: const EdgeInsets.all(16.0), child: widget.child, ), ), ); } }

2.4 主题管理

class ThemeManager { static final lightTheme = ThemeData( brightness: Brightness.light, primaryColor: Colors.blue, colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), useMaterial3: true, ); static final darkTheme = ThemeData( brightness: Brightness.dark, primaryColor: Colors.blue, colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark), useMaterial3: true, ); } class ThemeProvider extends ChangeNotifier { bool _isDarkMode = false; ThemeData get currentTheme => _isDarkMode ? ThemeManager.darkTheme : ThemeManager.lightTheme; bool get isDarkMode => _isDarkMode; void toggleTheme() { _isDarkMode = !_isDarkMode; notifyListeners(); } }

2.5 状态管理

class CounterNotifier extends ChangeNotifier { int _count = 0; int get count => _count; void increment() { _count++; notifyListeners(); } void decrement() { _count--; notifyListeners(); } } class CounterWidget extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider( create: (context) => CounterNotifier(), child: Consumer<CounterNotifier>( builder: (context, counter, child) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Count: ${counter.count}'), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: counter.decrement, child: Text('-'), ), SizedBox(width: 20), ElevatedButton( onPressed: counter.increment, child: Text('+'), ), ], ), ], ); }, ), ); } }

3. 最佳实践

3.1 组件复用

创建可复用的UI组件库
使用主题和样式统一管理
封装常用组件为自定义控件

3.2 性能优化

使用const构造器减少重建
避免在build方法中创建复杂对象
使用ListView.builder等懒加载组件
合理使用缓存

3.3 可访问性

添加语义标签
确保足够的颜色对比度
支持屏幕阅读器
提供键盘导航

3.4 测试

为UI组件编写单元测试
测试不同屏幕尺寸下的表现
测试主题切换效果

4. 实际应用

4.1 登录页面

class LoginPage extends StatelessWidget { final TextEditingController _emailController = TextEditingController(); final TextEditingController _passwordController = TextEditingController(); final _formKey = GlobalKey<FormState>(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('登录')), body: Padding( padding: const EdgeInsets.all(16.0), child: Form( key: _formKey, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextFormField( controller: _emailController, decoration: const InputDecoration( labelText: '邮箱', border: OutlineInputBorder(), prefixIcon: Icon(Icons.email), ), validator: (value) { if (value == null || value.isEmpty) { return '请输入邮箱'; } if (!RegExp(r'^[^\s@]+@[^\s@]+\.[^\s@]+$').hasMatch(value)) { return '请输入有效的邮箱'; } return null; }, ), const SizedBox(height: 16), TextFormField( controller: _passwordController, obscureText: true, decoration: const InputDecoration( labelText: '密码', border: OutlineInputBorder(), prefixIcon: Icon(Icons.lock), ), validator: (value) { if (value == null || value.isEmpty) { return '请输入密码'; } if (value.length < 6) { return '密码长度至少为6位'; } return null; }, ), const SizedBox(height: 24), CustomButton( text: '登录', onPressed: () { if (_formKey.currentState!.validate()) { // 登录逻辑 } }, ), const SizedBox(height: 16), TextButton( onPressed: () { // 跳转到注册页面 }, child: const Text('还没有账号？立即注册'), ), ], ), ), ), ); } }

4.2 产品列表

class ProductList extends StatelessWidget { final List<Product> products; const ProductList({Key? key, required this.products}) : super(key: key); @override Widget build(BuildContext context) { return GridView.builder( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10, childAspectRatio: 0.75, ), itemCount: products.length, itemBuilder: (context, index) { final product = products[index]; return AnimatedCard( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Expanded( child: Image.network( product.imageUrl, fit: BoxFit.cover, width: double.infinity, ), ), const SizedBox(height: 8), Text( product.name, style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 16, ), maxLines: 2, overflow: TextOverflow.ellipsis, ), const SizedBox(height: 4), Text( '¥${product.price}', style: const TextStyle( color: Colors.red, fontWeight: FontWeight.bold, fontSize: 18, ), ), const SizedBox(height: 8), ElevatedButton( onPressed: () { // 添加到购物车 }, style: ElevatedButton.styleFrom( backgroundColor: Colors.blue, minimumSize: const Size(double.infinity, 36), ), child: const Text('加入购物车'), ), ], ), ); }, ); } }