如何在 Flutter 中创建选项列表并突出显示所选选项？

Question

我正在尝试创建一个用户注册页面，他们可以在其中选择想要徒步旅行的天气，并将该选项作为用户信息的一部分。我只使用它的前端，我确实知道这可能是一列具有不同选项的按钮。

问题是，如何在选择时更改按钮的颜色并取消更改其他按钮的颜色？

我对 flutter 还很陌生，所以这个页面是基于 StatefulWidget 的，请

这是我尝试的一个片段。该代码与预期结果不接近：

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:trailx_app/const/colors.dart';

class SignUpWeatherQ extends StatefulWidget {
  const SignUpWeatherQ({super.key});

  @override
  _SignUpWeatherQ createState() => _SignUpWeatherQ();
}

class _SignUpWeatherQ extends State<SignUpWeatherQ> {
  @override
  void initState() {
    super.initState();
    // Initialize any data or perform actions before the page is built
  }

  @override
  void dispose() {
    // Clean up any resources or listeners when the widget is removed from the widget tree
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    int selectedIndex = 0;
    return Scaffold(
        backgroundColor: backgroundColor,
        body: Padding(
            padding: const EdgeInsets.all(16),
            child: GridView.builder(
              physics: const ClampingScrollPhysics(),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 1),
              itemCount: 5,
              itemBuilder: (context, index) {
                return ElevatedButton(
                  style: ButtonStyle(foregroundColor: ),
                  onPressed: () => setState(() {
                    selectedIndex = index;
                  }),
                  child: Text(
                    "Sunny",
                    style: GoogleFonts.getFont(
                      'Inter',
                      textStyle: TextStyle(
                          color: loginTextColor,
                          fontWeight: FontWeight.w400,
                          letterSpacing: 0.6,
                          wordSpacing: 1,
                          fontSize: 20),
                    ),
                  ),
                );
              },
            )));
  }

  // Define any other helper methods or callbacks
}

Answer 1

如果我理解正确，您需要创建逻辑，其中所选选项将以不同的颜色显示。您可以通过定义 selectedIndex 并在 ButtonStyle 中使用它来实现此目的。这是一个例子：

class SignUpWeatherQ extends StatefulWidget {
  const SignUpWeatherQ({super.key});

  @override
  _SignUpWeatherQ createState() => _SignUpWeatherQ();
}

class _SignUpWeatherQ extends State<SignUpWeatherQ> {
  int selectedIndex = -1; // No selection initially

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: GridView.builder(
          physics: const ClampingScrollPhysics(),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 1),
          itemCount: 5,
          itemBuilder: (context, index) {
            bool isSelected = selectedIndex == index;

            return ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(
                  isSelected ? Colors.blue : Colors.grey, // Change button color based on selection
                ),
                foregroundColor: MaterialStateProperty.all(
                  isSelected ? Colors.white : loginTextColor, // Change text color based on selection
                ),
              ),
              onPressed: () => setState(() {
                selectedIndex = index; // Update selected index
              }),
              child: Text(
                "Sunny", // You can change this to dynamic content based on index
                style: GoogleFonts.getFont(
                  'Inter',
                  textStyle: TextStyle(
                    color: isSelected ? Colors.white : loginTextColor,
                    fontWeight: FontWeight.w400,
                    letterSpacing: 0.6,
                    wordSpacing: 1,
                    fontSize: 20,
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}