flutter 我怎样才能存档,只有一个按钮可以选择在一个ListView小部件?

mklgxw1f  于 2023-05-08  发布在  Flutter
关注(0)|答案(1)|浏览(125)

我用OutlinedButtons创建了一个水平的ListView,我想存档,因为过滤器的目的,只有一个按钮可以被选择。现在我可以选择很多我想要的。如果有人能在这里帮助我,我将不胜感激。

class _CategoriesListViewState extends State<CategoriesListView> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      itemCount: widget.categories.length,
      itemBuilder: (BuildContext context, int index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: CreateCategoryButton(
            category: widget.categories[index],
            index: index,
            onPressed: () {},
          ),
        );
      },
    );
  }
}

class _CreateCategoryButtonState extends State<CreateCategoryButton> {
  bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      style: OutlinedButton.styleFrom(
        backgroundColor:
            isSelected ? Constants.backGroudColor : Colors.transparent,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16),
        ),
        side: const BorderSide(
          color: Colors.black,
          width: 0.7,
        ),
      ),
      onPressed: () {
        widget.onPressed;

        setState(() {
          isSelected = !isSelected;
        });
      },
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        child: Text(
          widget.category,
          style: TextStyle(
              color: Constants.textAndButtomColor,
              fontSize: 16,
              fontFamily: GoogleFonts.montserratAlternates().fontFamily),
        ),
      ),
    );
  }
}
nwsw7zdq

nwsw7zdq1#

理想情况下,您希望跟踪所选类别。从你的代码来看,你的类别似乎是一个字符串。
您可以创建一个变量来保存选定的类别并传递给您的自定义按钮,如下所示。

class _CategoriesListViewState extends State<CategoriesListView> {
  String? _selectedCategory;
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      itemCount: widget.categories.length,
      itemBuilder: (BuildContext context, int index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: CreateCategoryButton(
            category: widget.categories[index],
            selectedCategory: _selectedCategory,
            onPressed: () {
             setState((){
              _selectedCategory = widget.categories[index];
             });
            },
          ),
        );
      },
    );
  }
}

您应该注意到,我已经从CreateCategoryButton中删除了索引,因为根据您的代码,它似乎没有被使用。
将selectedCategory参数添加到CreateCategoryButton。你应该有类似以下的东西:

class CreateCategoryButton extends StatefulWidget {
  const CreateCategoryButton({Key? key, this.selectedCategory})
      : super(key: key);

  final String? selectedCategory;

  @override
  State<CreateCategoryButton> createState() => _CreateCategoryButtonState();
}

您还应编辑按钮状态以匹配以下内容:

class _CreateCategoryButtonState extends State<CreateCategoryButton> {

  @override
  Widget build(BuildContext context) {
    bool isSelected = widget.category == widget.selectedCategory;
    return OutlinedButton(
      style: OutlinedButton.styleFrom(
        backgroundColor:
            isSelected ? Constants.backGroudColor : Colors.transparent,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16),
        ),
        side: const BorderSide(
          color: Colors.black,
          width: 0.7,
        ),
      ),
      onPressed: widget.onPressed,
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        child: Text(
          widget.category,
          style: TextStyle(
              color: Constants.textAndButtomColor,
              fontSize: 16,
              fontFamily: GoogleFonts.montserratAlternates().fontFamily),
        ),
      ),
    );
  }
}

基本的想法是创建一个selectedCategory变量,并与按钮类别进行比较,因此我们这样做的原因是:widget.category == widget.selectedCategory

相关问题