时间戳

首页 > 解决方案 > 当用户按下或从芯片小部件列表中选择时，我如何获得芯片的值

flutter - 当用户按下或从芯片小部件列表中选择时，我如何获得芯片的值

问题描述

我正在创建一个允许芯片在水平空间上水平滚动的功能。为了实现这个功能，我们在 SingleChildScrollView 中开发了 Row 组件。当用户按下其中一个芯片时，我想要芯片按钮的值，onpressed 对我不起作用？

here is my Build method where is use the chips

  @override
  Widget build(BuildContext context) {
    print(widget.useridforinfo);
    print(widget.usertypeforinfo);
    return Scaffold(
     key: _key,
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
        elevation: 0.0,
        backgroundColor: Colors.orange.shade900,
      ),
      body: Column(
        children: <Widget>[
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: rowChips(),
          ),
        ],
      ),

      );
  }

 rowChips(){
    return Row(
      children: <Widget>[
        chipForRow("Aids Abeba",Color(0xFFff8a65)),
        chipForRow("Adama",Color(0xFF9575cd)),
        chipForRow("Hawasssa",Color(0xFF4db6ac)),
        chipForRow("Bishoftu",Color(0xFF5cda65)),
        chipForRow("Aids Abeba",Color(0xFFff8a65)),
        chipForRow("Adama",Color(0xFF9575cd)),
        chipForRow("Hawasssa",Color(0xFF4db6ac)),
        chipForRow("Bishoftu",Color(0xFF5cda65)),
      ],
    );
  }

here is my method to Create the chips

  Widget chipForRow(String label, Color color){
    return Container(
      margin: EdgeInsets.all(6.0),
      child: Chip(
        labelPadding: EdgeInsets.all(5.0),
         avatar: CircleAvatar(
           backgroundColor: Colors.grey.shade900,
           child:  Text(label[0].toUpperCase())
         ),
        label: Text(
          label,
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        backgroundColor: color,
        elevation: 6.0,
        shadowColor: Colors.grey[60],
        padding: EdgeInsets.all(6.0),

      ),

    );

  }

标签： flutterdart

解决方案

用 GestureDetector Widget 包装 Chip 小部件并使用 onTap 参数，如下所示：

更简单的方法

...

GestureDetector(
    child: Chip(
      labelPadding: EdgeInsets.all(5.0),
      avatar: CircleAvatar(
          backgroundColor: Colors.grey.shade900,
          child: Text(label.toString()[0].toUpperCase())),
      label: Text(
        label.toString(),
        style: TextStyle(
          color: Colors.white,
        ),
      ),
      backgroundColor: color,
      elevation: 6.0,
      shadowColor: Colors.grey[60],
      padding: EdgeInsets.all(6.0),
    ),
    onTap: () {
      //Prints the label of each tapped chip
      print(label);
    },
  ),

 ...

另一种方法

创建一个列表来保存 ChipForRow 对象

//List to hold Chip Objects
  final List<ChipForRow> chips = [
    ChipForRow("Aids Abeba", Color(0xFFff8a65)),
    ChipForRow("Adama", Color(0xFF9575cd)),
    ChipForRow("Hawasssa", Color(0xFF4db6ac)),
    ChipForRow("Bishoftu", Color(0xFF5cda65)),
    ChipForRow("Aids Abeba", Color(0xFFff8a65)),
    ChipForRow("Adama", Color(0xFF9575cd)),
    ChipForRow("Hawasssa", Color(0xFF4db6ac)),
    ChipForRow("Bishoftu", Color(0xFF5cda65)),
  ];

创建一个有状态的 Widget 类，ChipFirRow而不是一个函数

class ChipForRow extends StatelessWidget {
  final String label;
  final Color color;

  ChipForRow(this.label, this.color);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(6.0),
      child: GestureDetector(
        child: Chip(
          labelPadding: EdgeInsets.all(5.0),
          avatar: CircleAvatar(
              backgroundColor: Colors.grey.shade900,
              child: Text(label.toString()[0].toUpperCase())),
          label: Text(
            label.toString(),
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          backgroundColor: color,
          elevation: 6.0,
          shadowColor: Colors.grey[60],
          padding: EdgeInsets.all(6.0),
        ),
        onTap: () {
          print(label);
        },
      ),
    );
  }
}

使用**第二种方法，我们可以在选择或取消选择任何ChipForRow小部件时重建它，通过从字符串列表中添加/删除它的标签来指示何时选择或取消选择芯片。

推荐阅读