时间戳

首页 > 解决方案 > 创建具有多个可点击项目（类别）的网格视图

flutter - 创建具有多个可点击项目（类别）的网格视图

问题描述

我想制作一个具有十二个类别的多选网格视图。我无法创建它的可点击和不可点击部分。另外，我怎样才能让用户可以选择多个类别？正如您在下面的代码中看到的那样，我希望用户根据他们的兴趣在网格中单击大约十二个类别，这就是需要多选的原因。

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: AppBar(
      title: const Text('Interests'),
    ),
    resizeToAvoidBottomPadding: false,
    body: GridView.count(
      padding: const EdgeInsets.all(30),
      childAspectRatio: (6 / 1),
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      // Create a grid with 1 columns.
      crossAxisCount: 1,
      children: <Widget> [
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Food & Drinks'),
          color: Colors.teal[100],
        ),
        Container(
          padding: const EdgeInsets.all(1),
          child: const Text('Sport'),
          color: Colors.teal[200],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Fitness'),
          color: Colors.teal[300],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Animals'),
          color: Colors.teal[100],
        ),
        Container(
          padding: const EdgeInsets.all(1),
          child: const Text('Parent hang'),
          color: Colors.teal[200],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Film'),
          color: Colors.teal[300],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Explore'),
          color: Colors.teal[100],
        ),
        Container(
          padding: const EdgeInsets.all(1),
          child: const Text('Nature'),
          color: Colors.teal[200],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Gaming'),
          color: Colors.teal[300],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Music'),
          color: Colors.teal[100],
        ),
        Container(
          padding: const EdgeInsets.all(1),
          child: const Text('Art'),
          color: Colors.teal[200],
        ),
        Container(
          color: Colors.green,
          padding: const EdgeInsets.all(8),
          child: Center( 
            child: Text('Culture events', style: TextStyle(color: Colors.black)
          ),
        ]
      )
    ); 
  }    
}

标签： fluttergridview

解决方案

You need to surround each Container with an Inkwell (if you want a ripple effect on click) or a GestureDetector (if you just want a simple tap).

After that, you have to initialise a structure that keeps track of whether the item is clicked or not. For example, an array of boolean values which has the corresponding index as true if the corresponding item is clicked.

In the onTap() method of your surrounding Inkwell/GD, set the value in the structure you made above. Also, add an indication about the selection, like invert colors of the text and background, or change the background color if the item is selected vs not selected.

推荐阅读