flutter自定义组件扩展怎么设计示例详解

class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback? onPressed; // 可为空，为空时按钮禁用
  final Color backgroundColor;
  final Color textColor;
  final double borderRadius;

  const CustomButton({
    super.key,
    required this.text,
  this.onPressed,
    this.backgroundColor = Colors.blue, // 默认值
    this.textColor = Colors.white,      // 默认值
    this.borderRadius = 8.0,            // 默认值
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        backgroundColor: backgroundColor,
        foregroundColor: textColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(borderRadius),
        ),
      ),
      child: Text(text),
    );
  }
}

// 使用：
// CustomButton(text: 'Login', onPressed: () => print('Logged in!'))
// CustomButton(text: 'Submit', onPressed: () {}, backgroundColor: Colors.green)

class TitledCard extends StatelessWidget {
  final String title;
  final Widget child; // <-- "内容插槽"
  final Widget? actionWidget; // <-- "命名插槽"，可选

  const TitledCard({
    super.key,
    required this.title,
    required this.child,
    this.actionWidget,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(title, style: Theme.of(context).textTheme.headlineSmall),
                if (actionWidget != null) actionWidget!, // 渲染命名插槽
              ],
            ),
            const Divider(),
            const SizedBox(height: 8),
            child, // <-- 将使用者传入的 Widget 渲染在这里
          ],
        ),
      ),
    );
  }
}

// 使用：
/*
TitledCard(
  title: 'User Profile',
  actionWidget: IconButton(icon: Icon(Icons.edit), onPressed: () {}),
  child: Column( // 任何 Widget 都可以放进来
    children: [
      Text('Name: Alex'),
      Text('Email: alex@example.com'),
    ],
  ),
)
*/

// 模拟的用户数据模型
class User {
  final String name;
  User(this.name);
}

// 定义构建器的函数类型
typedef UserWidgetBuilder = Widget Function(BuildContext context, User user);

class UserDataFetcher extends StatefulWidget {
  final int userId;
  final UserWidgetBuilder builder; // <-- 构建器

  const UserDataFetcher({super.key, required this.userId, required this.builder});

  @override
  State<UserDataFetcher> createState() => _UserDataFetcherState();
}

class _UserDataFetcherState extends State<UserDataFetcher> {
  Future<User>? _userFuture;

  @override
  void initState() {
    super.initState();
    _fetchUser();
  }

  void _fetchUser() {
    // 模拟网络请求
    _userFuture = Future.delayed(const Duration(seconds: 2), () => User('User ${widget.userId}'));
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<User>(
      future: _userFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        }
        if (snapshot.hasError) {
          return const Text('Error loading user');
        }
        if (snapshot.hasData) {
          // 调用使用者传入的 builder，并把获取到的 user 数据传出去
          return widget.builder(context, snapshot.data!);
        }
        return const SizedBox.shrink();
      },
    );
  }
}

// 使用：
/*
UserDataFetcher(
  userId: 123,
  builder: (context, user) { // 使用者自己决定如何渲染 User 数据
    return Text('Welcome, ${user.name}!', style: TextStyle(fontSize: 20));
  },
)
*/

// 在你的 App 主题中定义扩展
class MyButtonTheme extends ThemeExtension<MyButtonTheme> {
  final Color? defaultColor;
  // ... 其他按钮样式

  MyButtonTheme({this.defaultColor});
  
  // ... 实现 copyWith, lerp, etc.
}

// 在 CustomButton 内部
@override
Widget build(BuildContext context) {
  // 从主题中获取自定义按钮主题
  final myButtonTheme = Theme.of(context).extension<MyButtonTheme>();
  
  // 优先使用构造函数传入的颜色，如果没传，则使用主题中的颜色，最后使用硬编码的兜底颜色
  final bgColor = widget.backgroundColor ?? myButtonTheme?.defaultColor ?? Colors.blue;

  return ElevatedButton(
    onPressed: onPressed,
    style: ElevatedButton.styleFrom(backgroundColor: bgColor, ...),
    child: Text(text),
  );
}