Flutter 如何在 SingleChildScrollView 小部件中管理自定义小部件状态

我在试着设计这个景观.

我已经有了卡片的基本设计，但我想知道当用户点击其中之一时，如何更改卡片的背景 colored颜色 、卡片的边框 colored颜色 ，并根据当前卡片的宽度大小添加小绿色方块.重要的是要知道，当用户点击它时，只有一张卡片可以涂成绿色.

以下是我的代码:

CategoryCardModel个

class CategoryCardModel {
  final String? categoryCardModelName;

  CategoryCardModel(this.categoryCardModelName);
}

CategoryCard个

import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class CategoryCard extends StatelessWidget {
  final String? categoryCardName;
  final Function()? wasPressed;

  const CategoryCard({
    super.key,
    required this.categoryCardName,
    this.wasPressed,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: wasPressed,
      child: Card(
        shape: RoundedRectangleBorder(
          side: const BorderSide(
            color: Color.fromRGBO(212, 213, 215, 100),
            width: 3,
          ),
          borderRadius: BorderRadius.circular(20.0),
        ),
        child: Container(
          decoration: BoxDecoration(
              color: const Color.fromRGBO(242, 243, 243, 100),
              borderRadius: BorderRadius.circular(20.0)),
          padding: const EdgeInsets.all(10),
          child: Text(
            categoryCardName ?? 'Todas',
            style: const TextStyle(
                fontSize: 25,
                fontWeight: FontWeight.bold,
                color: Color.fromRGBO(91, 94, 99, 100)),
          ),
        ),
      ),
    );
  }
}

MyHomePage个

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'category_card.dart';
import 'category_card_model.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // List of models
  final categoryCardModelList = <CategoryCardModel>[
    CategoryCardModel("Todas"),
    CategoryCardModel("Smartphones"),
    CategoryCardModel("Accesorios para celular"),
    CategoryCardModel("TV")
  ];

  List<CategoryCardModel>? _categoryCardModelListOf;

  @override
  void initState() {
    super.initState();
    setState(() {
      _categoryCardModelListOf = List.of(categoryCardModelList);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: _categoryCardModelListOf!
                    .map<Widget>((categoryCardModel) => CategoryCard(
                        wasPressed: () {
                          print("Hello World");
                          setState(() {});
                        },
                        categoryCardName:
                            categoryCardModel.categoryCardModelName))
                    .toList())));
  }
}

main个

import 'package:flutter/material.dart';

import 'my_home_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: "Caregory Cards"),
    );
  }
}