function - self 更新的 Flutter 模型

Question

为了开发我的应用程序，我想使用我创建的模型，因为我必须在 3 个页面中显示这个小部件。

这个小部件有一个函数，当小部件被点击时调用，当按钮被点击时，文本和颜色应该改变。 这应该发生在列表 items 的 userID 时(这些项目是用户数据列表，列表的结构类似于 [{''userID' : 'keykeykey, 'userName': 'Ryan', ...}, {..}, {..}]) 等于登录用户的userID。

为了这个问题的目的，我创建了一个小部件(但原来的部件里面有更多的东西

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class SomeRandomCard extends StatelessWidget {
  SomeRandomCard({@required this.onPressed, this.text, this.color});

  final GestureTapCallback onPressed;
  String text;
  Color color;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      child: Text(text,
      style: TextStyle(
        color: color
      ),),
      onPressed: onPressed,
    );
  }
}

然后我在 ListView.builder 中调用 SomeRandomCard 小部件:

userID = 'TestTestTestTestTestTestTest';
String text = 'a';
Color color = Colors.green;

  changeText(someID) {
    if (someID == userID) {
      setState(() {
        print(text);
        if (text == 'a') {
          text = 'b';
          color = Colors.green;
        } else {
          text = 'a';
          color = Colors.red;
        }
      });
    }
  }

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: style.coral,
      body: Container(
      child: ListView.builder
        (
          itemCount: items.length,
          itemBuilder: (BuildContext ctxt, int index) {
            return SomeRandomCard(onPressed: changeText(items[index]['userID']), text: text, color: color,);
          }
      )
      ),
      floatingActionButton: MyFloatingButton(),
    );
  }

但文本和颜色没有改变，函数也没有被调用。

我认为刷新问题是由 StatelessWidget 引起的，然后我编辑模型并编写了这个 StatefulWidget:

class SomeRandomCard extends StatefulWidget {
  SomeRandomCard({@required this.onPressed, this.text, this.color});

  final GestureTapCallback onPressed;
  String text;
  Color color;


  @override
  State<StatefulWidget> createState() => new _SomeRandomCardState();
}

class _SomeRandomCardState extends State<SomeRandomCard> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      child: Text(widget.text,
      style: TextStyle(
        color: widget.color
      ),),
      onPressed: widget.onPressed,
    );
  }
}

但是和之前一样，函数没有被调用。

我知道真正的问题是调用函数时的变量，因为如果我创建了一个不需要参数的新函数

SomeRandomCard(onPressed: changeText, text: text, color: color,);

函数被调用并改变屏幕上的值。

但是我要检查userId是否相同，我该怎么做呢？

Answer 1

这才是真正的问题

SomeRandomCard(onPressed: changeText(items[index]['userID']), text: text, color: color,);

和

SomeRandomCard(onPressed: changeText, text: text, color: color,);

第一个，你将 void 或什么都没有(null)传递给 onPressed 因为你调用了 changeText和 changeText 返回 void。

第二个之所以有效，是因为您传递了一个实际的 function 而不是 null 或 void。

根据您的要求。

the function is been called and change the value on the screen. But I have to check if the userId is the same, how can I do it?

你可以这样做:

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: style.coral,
      body: Container(
      child: ListView.builder
        (
          itemCount: items.length,
          itemBuilder: (BuildContext ctxt, int index) {
            return SomeRandomCard(onPressed: () { changeText(items[index]['userID']) }, text: text, color: color,);
          }
      )
      ),
      floatingActionButton: MyFloatingButton(),
    );
  }

顺便说一句，index的保存可能会造成混淆。我以前有过这种困惑，所以我提供了一个最小的例子，你可以在 DartPad 上试试看看它是如何工作的。

class TestCallback {
  final Function onPress;
  TestCallback(this.onPress);

  call() {
    onPress();
  }
}

main(){
  List<TestCallback> callbacks = new List<TestCallback>();
  for(int i = 0; i < 5; i++)
    callbacks.add(TestCallback((){ print(i); }));
  for(int i = 0; i < 5; i++)
    callbacks[i].call();
}

输出: 0 1 2 3 4