更改选项的颜色并通过在颤振中点击它们来显示不同的小部件？

Question

我正在使用颤振。我想在点击特定选项时更改其颜色，而不是同时更改所有选项。当我们按下一个选项时，它的颜色会发生变化，并在其下方显示不同的小部件（如选项卡栏）。代码附在下面。如果有人提供帮助，我很高兴。 ..

import 'package:flutter/material.dart';

class cards extends StatelessWidget {
const cards({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text("Cards"),
  ),
  body: Padding(
    padding: const EdgeInsets.only(top: 20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        optionCards("A", "assets/icons/recycle.png", context),
        optionCards("B", "assets/icons/tools.png", context),
        optionCards("C", "assets/icons/file.png", context),
      ],
    ),
  ),
  );
  }

Widget optionCards(
String text,
String assetImage,
BuildContext context,
) {
return Container(
  width: 100,
  height: 100,
  decoration: const ShapeDecoration(
    color: Colors.grey,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(5),
      ),
    ),
  ),
  child: SingleChildScrollView(
    child: Column(
      children: [
        const Padding(
          padding: EdgeInsets.only(top: 13),
          child: IconButton(
            onPressed: null,
            icon: Icon(Icons.file_copy),
          ),
        ),
        Text(
          text,
          style: const TextStyle(
            fontSize: 14,
            fontFamily: 'CeraPro',
            color: Color.fromRGBO(0, 0, 0, 1),
          ),
        )
      ],
    ),
  ),
  );
 }
}

Answer 1

保持保持选定选项卡的状态。

您的代码已使用选项卡栏可行性进行了更新。

更新的代码：

import 'package:flutter/material.dart';

class Card extends StatefulWidget {
  const Card({Key? key}) : super(key: key);

  @override
  State<Card> createState() => _CardState();
}

class _CardState extends State<Card> {
  String selectedCard = '1';

  @override
  Widget build(BuildContext context) {
    final List<dynamic> tabOptionsList = [
      {"id": "1", "text": "A options"},
      {"id": "2", "text": "B options"},
      {"id": "3", "text": "C options"}
    ];

    final selectedTabValue = tabOptionsList
        .where((element) => element['id'] == selectedCard)
        .toList()[0]['text'];

    print(selectedTabValue);
    return Scaffold(
      appBar: AppBar(
        title: const Text("Cards"),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                optionCards("A", "assets/icons/recycle.png", context, "1"),
                optionCards("B", "assets/icons/tools.png", context, "2"),
                optionCards("C", "assets/icons/file.png", context, "3"),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              selectedTabValue,
              style: const TextStyle(color: Colors.red),
            ),
          ),
        ],
      ),
    );
  }

  Widget optionCards(
      String text, String assetImage, BuildContext context, String cardId) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selectedCard = cardId;
        });
      },
      child: Container(
        width: 100,
        height: 100,
        decoration: ShapeDecoration(
          color: cardId == selectedCard ? Colors.green : Colors.grey,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(5),
            ),
          ),
        ),
        child: SingleChildScrollView(
          child: Column(
            children: [
              const Padding(
                padding: EdgeInsets.only(top: 13),
                child: IconButton(
                  onPressed: null,
                  icon: Icon(Icons.file_copy),
                ),
              ),
              Text(
                text,
                style: const TextStyle(
                  fontSize: 14,
                  fontFamily: 'CeraPro',
                  color: Color.fromRGBO(0, 0, 0, 1),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}