Question

我正在寻找一个包含4个自定义小部件的网格，这些小部件可以从给定的起始数字增加或减少。 See image for reference. 例如，如果您按一个播放器，则该数字将增加或减少到100或99。但是其他3个播放器将保持不变。

我最初使用的是一个有状态的小部件，为每个玩家使用一个单独的功能，但是我敢肯定，有一种方法可以以更模块化的方式进行。

class CommanderDamage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CommanderDamageState();
  }
}

class CommanderDamageState extends State<CommanderDamage> {
  int damage = 0;

  void update() {
    setState(() {
      damage++;
    });
  }

  @override
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        body: GridView.builder(
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemCount: 4,
          itemBuilder: (BuildContext context, index) {
            return Container(
              child: Column(
                children: <Widget>[
                  Text("Player " + index.toString()),
                  InkWell(
                    onTap: update,
                    child: Container(
                        width: 100.0,
                        height: 100.0,
                        child: Text(damage),
                  )
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

编辑：我已经编辑了代码以反映当前的代码。当前，当按下伤害区域时，所有4位玩家的伤害都会增加，而不是我所按下的一位。

Answer 1

将文本小部件包装在InkWell（）中。 InkWell所做的基本上是创建一个矩形的触摸感应区域。

InkWell(
    child: Text(
      'Player One',
      style: TextStyle(
        fontSize: 20, color: Colors.white),
      onTap: () {
        // Your function
      }
    )

但这会根据文本的大小使交互式点击区域很小，因此最好将其包装在容器中并提供高度宽度或带填充的空间

InkWell(
    child: Container(
      width: 100,
      height: 100,
      child: Text(
        'Player One',
        style: TextStyle(
          fontSize: 20, color: Colors.white), ),
      onTap: () {
        // Your function
      }
    )

在onTap内部，您可以执行功能并进行更改。

了解有关InkWell的更多信息： https://docs.flutter.io/flutter/material/InkWell-class.html

Answer 2

经过反复尝试，我设法找到了答案。我必须在onTap中设置状态，而不是创建单独的函数并在onTap中调用它。

class CommanderDamage extends StatefulWidget {
  int damage = 0;
  CommanderDamage({this.damage, Key key});

  @override
  State<StatefulWidget> createState() {
    return CommanderDamageState();
  }
}

class CommanderDamageState extends State<CommanderDamage> {
  var damage = [0, 0, 0, 0, 0, 0];
  @override
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              height: MediaQuery.of(context).size.height,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft, end: Alignment.bottomRight,
                  colors: [Color(0xfff6921e), Color(0xffee4036)],
                ),
              ),
              child: GridView.builder(
                gridDelegate:
                    SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                itemCount: damage.length,
                itemBuilder: (BuildContext context, index) {
                  return Container(
                    child: Column(
                      children: <Widget>[
                        InkWell(
                          onTap: () {
                            setState(() {
                              damage[index]++;
                            });
                          },
                          onLongPress: () {
                            setState(() {
                              damage[index] = 0;
                            });
                          },
                          child: Container(
                            width: 100.0,
                            height: 100.0,
                            child: Text(damage[index].toString()),
                          ),
                        ),
                      ],
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

如何让四个相同的自定义小部件的文本分别更改？

2 个答案: