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

我已经尝试过使用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);
}

希望它会有所帮助：）

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

1 个答案: