Flutter 中的按钮会延迟停用？

Question

我在Flutter中编写了一个页面。您可以使用两个箭头（提升的按钮）来控制应显示哪个列表元素。如果到达第一个元素，则应隐藏向左箭头。如果到达最后一个元素，则应隐藏右侧按钮。这在一定程度上也是有效的。您不能再直接按下按钮，但是颜色变为灰色会被延迟，例如，如果您想浏览图片库，这会特别烦人。不幸的是，我不明白为什么。

import 'package:flutter/material.dart';


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


  @override
  State<ButtonProblem> createState() => _ButtonProblemState();
}


class _ButtonProblemState extends State<ButtonProblem> {
  late int currentIndex;
  late List<int> list;
  @override
  void initState() {
    super.initState();
    //Liste zum durchgehen
    list = [0, 1, 2, 3, 4, 5, 6];
    currentIndex = 0;
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Button Problem'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      body: Column(children: [
        SizedBox(
          height: 20,
        ),
        Text("currentIndex: ${currentIndex.toString()}"),
        Text("current list item: ${list[currentIndex].toString()}"),
        SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: currentIndex > 0 ? () => navigateToPrevious() : null,
              style: ElevatedButton.styleFrom(
                primary: Colors.blue,
                minimumSize: const Size(150, 50),
              ),
              child: const Icon(Icons.arrow_back, color: Colors.white),
            ),
            ElevatedButton(
              onPressed: (currentIndex < list.length - 1)
                  ? () => navigateToNext()
                  : null,
              style: ElevatedButton.styleFrom(
                primary: Colors.blue,
                minimumSize: const Size(150, 50),
              ),
              child: Icon(Icons.arrow_forward, color: Colors.white),
            ),
          ],
        ),
      ]),
    );
  }


  navigateToPrevious() {
    setState(() {
      currentIndex--;
    });
  }


  navigateToNext() {
    setState(() {
      currentIndex++;
    });
  }
}

我尝试使用 IgnorePointer 小部件，但这也没有帮助。

将不胜感激任何帮助:)

Answer 1

我找到了答案。我现在使用 MaterialStateProperty。 这是我现在的新代码：

import 'package:flutter/material.dart';

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

  @override
  State<ButtonProblem> createState() => _ButtonProblemState();
}

class _ButtonProblemState extends State<ButtonProblem> {
  late int currentIndex;
  late List<int> list;

  @override
  void initState() {
    super.initState();
    // Liste zum durchgehen
    list = [0, 1, 2, 3, 4, 5, 6];
    currentIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Button Problem'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      body: Column(children: [
        const SizedBox(
          height: 20,
        ),
        Text("currentIndex: ${currentIndex.toString()}"),
        Text("current list item: ${list[currentIndex].toString()}"),
        const SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: currentIndex > 0 ? () => navigateToPrevious() : null,
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.disabled)) {
                      return Colors.grey; 
                    }
                    return Colors.blue; 
                  },
                ),
                minimumSize: MaterialStateProperty.all<Size>(
                  const Size(150, 50),
                ),
              ),
              child: const Icon(Icons.arrow_back, color: Colors.white),
            ),
            ElevatedButton(
              onPressed: (currentIndex < list.length - 1)
                  ? () => navigateToNext()
                  : null,
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.disabled)) {
                      return Colors.grey; 
                    }
                    return Colors.blue; 
                  },
                ),
                minimumSize: MaterialStateProperty.all<Size>(
                  const Size(150, 50),
                ),
              ),
              child: const Icon(Icons.arrow_forward, color: Colors.white),
            ),
          ],
        ),
      ]),
    );
  }

  navigateToPrevious() {
    setState(() {
      currentIndex--;
    });
  }

  navigateToNext() {
    setState(() {
      currentIndex++;
    });
  }
}