如何在 ChoiceChip 中实现透明背景？

Question

我正在使用ChoiceChip 小部件创建一组选择。我想让芯片在某些条件下像这张图片一样具有透明背景

我尝试输入backgroundColor: Colors.transparent，但它会变成白色而不是透明。

这是我的代码：

String _selectedSize = "";
var sizes = ['XS', 'S', 'M', 'L', 'XL'];

_customChip(size) => InkWell(
        child: Container(
          width: 40.0,
          height: 40.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20.0),
            color: Colors.white,
          ),
          child: Stack(
            children: <Widget>[
              Center(child: Text(size, style: _chipTextStyle,)),
              Center(
                child: RotationTransition(
                  turns: AlwaysStoppedAnimation(315/360),
                  child: Container(height: 1.0, color: Colors.grey),
                ),
              ),
            ],
          ),
        ),
      );

      return Wrap(
        alignment: WrapAlignment.center,
        crossAxisAlignment: WrapCrossAlignment.center,
        children: sizes.map((size) {
          return ChoiceChip(
            pressElevation: 1.0,
            backgroundColor: Colors.transparent, // this doesn't work
            label: _customChip(size),
            labelPadding: EdgeInsets.symmetric(horizontal: 2.0),
            padding: EdgeInsets.all(2.0),
            materialTapTargetSize: MaterialTapTargetSize.padded,
            shape: CircleBorder(),
            selected: _selectedSize == size,
            selectedColor: _themeColor,
            onSelected: (isSelected) {
              setState(() {
                _selectedSize = size;
                });
            },
          );
        }).toList(),
      );

有没有办法让它透明，或者我应该使用ChoiceChip以外的小部件？谢谢！

Answer 1

Chip 小部件具有根据主题着色的材料。您可以通过更改 Theme.canvasColor 来更改它，如下所示：

Theme(
  data: ThemeData(canvasColor: Colors.transparent),
  child: Chip(
    label:Container(/*your widget*/),
    backgroundColor: Colors.transparent, // or any other color
  ),
)

或者，您可以通过以下方式保留旧主题（canvasColor 除外）：

Theme(
  data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
  child: Chip(
    label: Container(/*your widget*/),
    backgroundColor: Colors.transparent, // or any other color
  ),
)

Answer 2

我已经用 ChoiceChips 尝试了很多透明背景但没有成功，然后我决定以另一种方式来做，因为您还要求提供替代选项，所以我为您创建了示例，它与 ChoiceChips 的工作原理相似：

注意：对于未选择的背景颜色，我使用 "Colors.grey.withOpacity(0.1)" 但你也可以使用 "颜色.透明"

import 'package:flutter/material.dart';

class MyChoiceChipsRadio extends StatefulWidget {
  createState() {
    return CustomRadioState();
  }
}

class CustomRadioState extends State<MyChoiceChipsRadio> {
  List<RadioModel> sampleData = List<RadioModel>();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    sampleData.add(RadioModel(false, 'XS'));
    sampleData.add(RadioModel(false, 'S'));
    sampleData.add(RadioModel(false, 'M'));
    sampleData.add(RadioModel(false, 'L'));
    sampleData.add(RadioModel(false, 'XL'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListItem"),
      ),
      body: Stack(
        children: <Widget>[
          Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("assets/back_image.png"),
                  fit: BoxFit.cover,
                ),
              )
          ),
          ListView.builder(
            itemCount: sampleData.length,
            itemBuilder: (BuildContext context, int index) {
              return InkWell(
                //highlightColor: Colors.red,
                splashColor: Colors.blueAccent,
                onTap: () {
                  setState(() {
                    sampleData.forEach((element) => element.isSelected = false);
                    sampleData[index].isSelected = true;
                  });
                },
                child: RadioItem(sampleData[index]),
              );
            },
          ),
        ],
      ),
    );
  }
}

class RadioItem extends StatelessWidget {
  final RadioModel _item;
  RadioItem(this._item);
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15.0),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Container(
            height: 50.0,
            width: 50.0,
            child: Center(
              child: Text(_item.buttonText,
                  style: TextStyle(
                      color:
                      _item.isSelected ? Colors.red : Colors.grey,
                      //fontWeight: FontWeight.bold,
                      fontSize: 18.0)),
            ),
            decoration: BoxDecoration(
              color: _item.isSelected
                  ? Colors.white
                  : Colors.grey.withOpacity(0.1),
              shape: BoxShape.circle,
              border: Border.all(color: _item.isSelected
                  ? Colors.red
                  : Colors.grey, width: 1.0)
            ),
          ),
        ],
      ),
    );
  }
}

class RadioModel {
  bool isSelected;
  final String buttonText;

  RadioModel(this.isSelected, this.buttonText);
}

希望对你有帮助:)