时间戳

首页 > 解决方案 > 按下时 Flutter Button Grid 布局调用每个按钮

flutter - 按下时 Flutter Button Grid 布局调用每个按钮

问题描述

我已经实现了一个带有卡片的仪表板，使它们可以点击。我已将这些卡片放入网格布局中，并尝试为每张卡片 onTap 提供一个简单的动画。但是当我尝试点击网格布局中的单个项目时，所有项目都会被调用。有人可以帮我解决这个问题吗？我将提供我的代码片段。

网格

Widget createGridItem(int position) {
      var icondata = Icons.add;
      var title = "";

      switch (position) {
        case 0:
          icondata = Icons.pie_chart;
          break;
        case 1:
          icondata = Icons.perm_device_info;
          break;
}

return GestureDetector(
        onTap: () => buttonHandler(),
        child: Transform.scale(
          scale: _scale,
          child: homeEnabledButtons(
            context,
            title,
            icondata,
          ),
        ),
      );

GridView(
              shrinkWrap: true,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 30,
                mainAxisSpacing: 30,
              ),
              children: [
                createGridItem(0),
                createGridItem(1),
                createGridItem(2),
                createGridItem(3),
               ], ),

按钮项目

Widget homeEnabledButtons(
    BuildContext context, String title, IconData icon, Function fun) {
  return
      Card(
    elevation: 10.0,
    color: color,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(
          icon,
          color: primaryColor,
          size: 100.0,
        ),
        Text(
          title,
          textAlign: TextAlign.center,
          style: AppTheme.subTitleATextStyle,
        ),
      ],
    ),
    shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(15))),
  );
}

动画调用自

void buttonHandler() {
    _controller.forward();
    Timer(const Duration(milliseconds: 100), () {
      _controller.reverse();
    });
    Timer(const Duration(milliseconds: 50), () {
      print("something");
    });
  }

标签： flutterbuttongridview

解决方案

传递位置以检查已点击哪个索引。



  Widget createGridItem(int position) {
    var icondata = Icons.add;
    var title = "";

    switch (position) {
      case 0:
        icondata = Icons.pie_chart;
        break;
      case 1:
        icondata = Icons.perm_device_info;
        break;

      default:
        icondata;
    }

    return GestureDetector(
      onTap: () => buttonHandler(position),
      child: Transform.scale(
        scale: 1,
        child: homeEnabledButtons(
          context,
          title,
          icondata,
          () {},
        ),
      ),
    );
  }

  void buttonHandler(int position) {
    print("button handler $position");
    // _controller.forward();
    // Timer(const Duration(milliseconds: 100), () {
    //   _controller.reverse();
    // });
    // Timer(const Duration(milliseconds: 50), () {
    //   print("something");
    // });
  }

  Widget homeEnabledButtons(
      BuildContext context, String title, IconData icon, Function fun) {
    return Card(
      elevation: 10.0,
      // color: color,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            icon,
            // color: primaryColor,
            size: 100.0,
          ),
          Text(
            title,
            textAlign: TextAlign.center,
            // style: AppTheme.subTitleATextStyle,
          ),
        ],
      ),
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(15))),
    );
  }

推荐阅读