AiKeyboard2025/lib/module/intimacy_analyse/widget/option_select_widget.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/data/bean/option_select_item.dart';

import '../../../data/bean/option_select_config.dart';
import '../../../resource/colors.gen.dart';

/// 切换选中时回调
typedef OnOptionSelectCallback =
    void Function(OptionSelectConfig config, OptionSelectItem optionItem);

/// 选项选择组件
class OptionSelectWidget extends StatelessWidget {
  /// 选项行的配置
  final OptionSelectConfig optionSelect;

  /// 切换选中时回调
  final OnOptionSelectCallback optionSelectCallback;

  const OptionSelectWidget({
    super.key,
    required this.optionSelect,
    required this.optionSelectCallback,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      // 宽度匹配父组件
      width: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题
          _buildTitle(),
          // 选项
          _buildOptionList(),
        ],
      ),
    );
  }

  /// 图标和标题
  Widget _buildTitle() {
    String icon = optionSelect.iconUrl;
    String title = optionSelect.title;
    // 是否不显示标题
    bool isNotTitle = icon.isEmpty && title.isEmpty;
    return Visibility(
      visible: !isNotTitle,
      child: Container(
        margin: EdgeInsets.only(bottom: 16.h),
        child: Row(
          children: [
            Visibility(
              visible: icon.isNotEmpty,
              child: Row(
                children: [
                  // 图标
                  CachedNetworkImage(
                    imageUrl: icon,
                    height: 14.h,
                    width: 14.w,
                    fit: BoxFit.fill,
                  ),
                  SizedBox(width: 2),
                ],
              ),
            ),
            // 标题
            Visibility(
              visible: title.isNotEmpty,
              child: Text(
                optionSelect.title,
                style: TextStyle(
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w700,
                  color: ColorName.black80,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 选项列表
  Widget _buildOptionList() {
    // 流式布局，类似安卓的FlowLayout，1列不固定3个，放不下就自动换行
    if (optionSelect.isCustom) {
      return Wrap(
        direction: Axis.horizontal,
        alignment: WrapAlignment.start,
        runAlignment: WrapAlignment.start,
        // 主轴间距
        spacing: 6.0,
        // 交叉轴间距
        runSpacing: 7.0,
        children: [
          for (var option in optionSelect.options)
            _buildOptionItem(optionSelect, option),
        ],
      );
    } else {
      // 固定一行3列，每项的宽度一样
      return GridView.builder(
        // 去掉默认的Padding，默认会有一个默认的顶部padding大小
        padding: EdgeInsets.zero,
        // 包裹内容
        shrinkWrap: true,
        // 禁止滚动
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 一行3列
          crossAxisCount: 3,
          // 水平方向的间距
          crossAxisSpacing: 6.0,
          // 垂直方向的间距
          mainAxisSpacing: 12.0,
          // 子项的宽高比
          childAspectRatio: 2.6,
        ),
        itemCount: optionSelect.options.length,
        itemBuilder: (context, index) {
          OptionSelectItem option = optionSelect.options[index];
          return _buildOptionItem(optionSelect, option);
        },
      );
    }
  }

  /// 选项
  /// [rowConfig] 选项行的配置
  /// [optionItem] 当前构建的那一项
  Widget _buildOptionItem(
    OptionSelectConfig rowConfig,
    OptionSelectItem optionItem,
  ) {
    // 背景圆角
    double bgBorderRadius = 31.r;

    // 背景，选中时为渐变色，未选中时为灰色
    BoxDecoration bgDecoration;
    if (optionItem.selected) {
      bgDecoration = BoxDecoration(
        gradient: LinearGradient(
          colors: [
            ColorName.bgOptionSelectSelected1,
            ColorName.bgOptionSelectSelected2,
          ],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
        borderRadius: BorderRadius.circular(bgBorderRadius),
      );
    } else {
      bgDecoration = BoxDecoration(
        color: ColorName.bgOptionSelectNormal,
        borderRadius: BorderRadius.circular(bgBorderRadius),
      );
    }

    Widget textWidget = Text(
      optionItem.name,
      textAlign: TextAlign.center,
      maxLines: 1,
      style: TextStyle(
        overflow: TextOverflow.ellipsis,
        fontSize: 13.sp,
        fontWeight: FontWeight.w400,
        // 文字颜色，选中时为白色，未选中时为黑色
        color: optionItem.selected ? ColorName.white : ColorName.black80,
      ),
    );

    Widget contentWidget;
    if (rowConfig.isCustom) {
      // 自定义，通过Wrap来实现，子项的宽度由自己的内容撑开，通过padding来撑大左右宽度
      contentWidget = Container(
        padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
        decoration: bgDecoration,
        child: textWidget,
      );
    } else {
      // 非自定义，通过GridView来实现，每个子项会平分宽度，通过Center来居中文字
      contentWidget = Container(
        decoration: bgDecoration,
        child: Center(child: textWidget),
      );
    }
    return GestureDetector(
      onTap: () {
        optionSelectCallback(rowConfig, optionItem);
      },
      child: contentWidget,
    );
  }
}