flutter组件封装技巧

在Flutter中，可以通过创建自定义组件（即小部件）来封装和复用界面逻辑。以下是一个简单的例子，展示了如何封装一个简单的自定义按钮组件：

import 'package:flutter/material.dart';
 
class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onTap;
 
  const CustomButton({Key? key, required this.label, required this.onTap}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onTap,
      child: Text(label),
    );
  }
}
 
// 使用自定义按钮
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomButton(
            label: '点击我',
            onTap: () => print('按钮被点击'),
          ),
        ),
      ),
    );
  }
}

在这个例子中，CustomButton 类封装了一个带有标签的可点击按钮。它接受两个参数：label 和 onTap，分别用于显示的文本和点击事件的处理函数。使用时，你只需要创建 CustomButton 的实例并传入所需的参数。这样，你可以在多个不同的部件和屏幕中复用这个按钮组件，从而减少重复的代码并提高应用的可维护性。