如何使flutter中一个响应文本具有onclick属性?

wqsoz72f  于 2023-03-19  发布在  Flutter
关注(0)|答案(3)|浏览(95)

我从API获得了一个响应列表,我使用列表视图生成器和文本小部件来一次显示所有响应,所以现在我将根据响应的长度显示多个文本。如何使一个特定文本具有on-click属性,以便当我单击该特定文本时,可以导航到另一个页面?

nle07wnf

nle07wnf1#

=〉如果您需要将特定索引文本设置为可点击,则可以直接使用索引。之后,您可以在导航中传递数据

ListView.builder(
  physics: const AlwaysScrollableScrollPhysics(),
  itemCount: UserList.length,
  shrinkWrap: true,
  itemBuilder: (context, index){
    return InkWell(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => SecondScreen(user: UserList[index].name),
          ),
        );
      },
      child: Text(UserList[index].name),
    );
  });
rqqzpn5f

rqqzpn5f2#

当你使用ListViewBuilder时,有两种情况。第一,如果你知道你需要点击哪个索引的文本,那么你可以直接使用index

ListView.builder(
                  physics: const AlwaysScrollableScrollPhysics(),
                  itemCount: controller.peerUserList.length,
                  shrinkWrap: true,
                  itemBuilder: (context, index){
                      return if(index == 3){
                      // write clickable code here preferably with Inkwell
                      } else{
                      // write your text code for others here
                      }
                 });

或者可以有一个使用索引数据或从文本本身相同的方法可以使用的情况下,只有条件,如果必须根据您的使用要求进行更改。

jmo0nnb3

jmo0nnb33#

创建如下自定义文本函数

widget createCustomText(String value, Function(String) callback) {
  return InkWell(
    onTap: () {
      callback.call("");
    },
    child: Text(value),
  );
}

//并在列表返回项中使用此函数,如下所示

return createCustomText("Your List item", (p0) {
    print("Print your value");
  });

相关问题