启用和禁用颤动中的按钮

时间:2020-02-01 08:47:14

标签: flutter

   import 'package:flutter/material.dart';

    class BidContainer extends StatefulWidget {
      final name;
      BidContainer({this.name});

      @override
      _BidContainerState createState() => _BidContainerState();
    }

    class _BidContainerState extends State<BidContainer> {
      bool _active = false;

      void handleTap() {
        setState(() {
          _active = !_active;
        });
      }

      @override
      Widget build(BuildContext context) {
        var names = widget.name;
        return GestureDetector(
          onTap: () {
            setState(() {
              print('$names');
              _active = !_active;
            });
          },
          child: Container(
            margin: EdgeInsets.all(8),
        height: 30,
        width: 50,
        child: Center(
          child: Text(
            '$names',
            style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.bold,
              fontSize: 15,
            ),
          ),
        ),
        decoration: BoxDecoration(
          color: _active ? Colors.deepPurpleAccent : Colors.white,
          borderRadius: BorderRadius.circular(15),
          border: Border.all(
            color: Colors.deepPurpleAccent,
            width: 1.2,
          ),
        ),
      ),
    );
  }
}

enter image description here

enter image description here

我正在尝试使该按钮处于活动状态和非活动状态,但是我可以使用我的代码来做到这一点,这是我单击这些容器后使用GridView()调用的容器,但是当我向上滚动时选择这些容器后,向下或向下

      Container(
        height: 500,
        width: 380,
        decoration: BoxDecoration(
          border: Border.all(
            width: 4,
            color: Colors.black,
          ),
        ),
        child: GridView(
          children: BID_DATA
              .map((bidValue) => BidContainer(
                    name: bidValue,
                  ))
              .toList(),
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 70,
            childAspectRatio: 3 / 2,
            crossAxisSpacing: 5,
            mainAxisSpacing: 5,
          ),
        ),
      ),

这是我调用了上面代码的容器,而BID_DATA是该容器中显示的那些数字的列表。

1 个答案:

答案 0 :(得分:1)

          child: GridView.builder(
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 70,
            childAspectRatio: 3 / 2,
            crossAxisSpacing: 5,
            mainAxisSpacing: 5,
          ),
          itemBuilder: (BuildContext context, int index) => Container(
            decoration: BoxDecoration(
              color: item[index] ? Colors.deepPurpleAccent : Colors.white,
              borderRadius: BorderRadius.circular(15),
              border: Border.all(
                color: Colors.deepPurpleAccent,
                width: 1.2,
              ),
            ),
            margin: EdgeInsets.all(
              5
            ),
            height: 30,
            width: 30,
            child: FlatButton(
              onPressed: () {
                setState(() {
                  item[index] = !item[index];
                });
              },
              child: Center(
                child: Text(
                  '${BID_DATA[index]}',
                  style: TextStyle(
                    color: item[index] ? Colors.white : Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 15,
                  ),
                ),
              ),
            ),
          ),
        ),