Question

问题

嗨，如何在flutter中实现自定义的多选小部件？这是一个示例：

我有一个用ListView.builder创建的小部件列表，我只是想根据userTap更改颜色。

我该如何实现？当用户点击一个选项时，我可以更改颜色，但是当另一个按钮被点击时，我不知道如何反转旧选项的状态。

我正在寻找一种具有标准状态管理或bloc库的解决方案。

示例代码

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index){
          return Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: SelectableContainer(text: 'option', index: index,),
          );
        },
      ),
    );
  }
}

class SelectableContainer extends StatefulWidget {
  final String text;
  final int index;

  SelectableContainer({
    @required this.text,
    @required this.index
  });
  @override
  _SelectableContainerState createState() => _SelectableContainerState();
}

class _SelectableContainerState extends State<SelectableContainer> {
  bool _isSelected = false;
  Color unselectedColor = Colors.white;
  Color selectedColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        setState(() {
          _isSelected = true;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 400),
        height: 50,
        color: _isSelected ? selectedColor : unselectedColor,
        child: Center(
          child: Text(widget.text),
        ),
      ),
    );
  }
}

谢谢

Answer 1

当用户选择一个项目时，首先将选择存储在列表中

selectionList.add(title.id);

然后在ListView.builder中更改标题的颜色（如果它位于selectionList中）

Title(color: selectionList.contain(listOfTitls[index].id)? Colors.green : Colors.White);

更新这个技巧将为您做到

return GestureDetector(
      onTap: (){
        setState(() {
          _isSelected =_isSelected? false:true;//this line
        });
      },

Answer 2

在您的setState方法中，您可以执行_isSelected = !_isSelected;而不是始终将其设置为true。这样，如果_isSelected设置为true，则图块将不会被选择。

尽管以上方法可以解决您的问题，但是对于同一场景，还有另一种称为ListTile的窗口小部件颤振。 Here是文档的链接。您可能还想检查一下。它还直接内置了onTap回调。

这是我使用ListTile构建的快速应用程序。希望它能解决您的问题。干杯！

import 'package:flutter/material.dart';

class DemoClass extends StatefulWidget {
  _DemoClassState createState() => _DemoClassState();
}

class _DemoClassState extends State<DemoClass> {
  int _selectedIndex = -1;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return AnimatedContainer(
            duration: Duration(milliseconds: 300),
            height: 50,
            color: _selectedIndex == index ? Colors.blue : Colors.transparent,
            child: ListTile(
              title: Text('This is some title'),
              onTap: () => setState(() {
                _selectedIndex = index;
              }),
            ),
          );
        }
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Center(
        child: Container(
          child: DemoClass(),
        ),
      ),
    );
  }
}

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

Flutter自定义多选

问题

示例代码

2 个答案: