flutter - 如何将 Onpressed 函数添加到列表的每个值
问题描述
我在将列表中的项目导航到新的 .dart 文件时遇到困难,这是我导入第二个文件的主页
class Home extends StatefulWidget {
@override
_HomeState createState() => new _HomeState();
}
class _HomeState extends State<Home> {
final List<String>listof=["Decimal Numbers","Binary Numbers","Decimal-to-Binary Conversion","Binary Arithmetic","Complements of Binary Numbers","Signed Numbers","Arithmetic Operations with Signed Numbers","Hexadecimal Numbers","Octal Numbers","Binary Coded Decimal (BCD)"];
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(
"Computer System Theory",
style: new TextStyle(fontSize: 19.0),
),
backgroundColor: Colors.deepPurple,
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.search),
onPressed: ()=>debugPrint("Search"),
),
],
),
body: new Container(
child: new ListView.builder(
itemBuilder: (_, int index)=>listDataItem(this.listof[index],),
itemCount: this.listof.length,
),
),
);
}
}
class listDataItem extends StatelessWidget{
String itemName;
listDataItem(this.itemName);
@override
Widget build(BuildContext context){
return new Card(
elevation: 7.0,
child: new Container(
margin: EdgeInsets.all(5.0),
padding: EdgeInsets.all(6.0),
child: new Row(
children: <Widget> [
new CircleAvatar(
child: new Text(itemName[0]),
backgroundColor: Colors.deepPurple,
foregroundColor: Colors.white,
),
new Padding(padding: EdgeInsets.all(8.0)),
new Text(itemName,style: TextStyle(fontSize: 18.0)),
],
),
),);
}
}
我尝试了这种方法,但我不知道如何将 onpress 函数添加到列表中的项目,如果我单击列表上的任何值应该带我到尊重的页面,例如 binary.dart
这是我的二进制代码
import 'package:flutter/material.dart';
class Binary extends StatefulWidget {
@override
_BinaryState createState() => _BinaryState();
}
class _BinaryState extends State<Binary> {
@override
Widget build(BuildContext context) {
double cWidth = MediaQuery.of(context).size.width*0.8;
return new Container (
padding: const EdgeInsets.all(16.0),
width: cWidth,
child: new Column (
children: <Widget>[
new Text ("Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 ", textAlign: TextAlign.left),
new Text ("Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2", textAlign: TextAlign.left),
],
),
);
}
}
解决方案
InkWell
您可以使用或包裹您的列表项GestureDetector
。
示例:在您的listDataItem
类的build
方法中,您返回一个Card
用 InkWell 包裹它。
InkWell(
onTap: () {
print('inkwell');
},
child: Card(...
推荐阅读
- java - Java分组返回到对象列表?
- c++ - 如何创建一个将进入睡眠状态或在控制台中输入“暂停”的操纵器?
- python - 从文本文件到列表的类对象
- class - 使用特定于子类型的行为 Kotlin 对混合列表进行排序
- tensorflow2.0 - Tensorflow 2.x Agents(TF-Agents, Reinforcement Learning Module) & PySC2
- javascript - 在 IE11 中使用 Vue 3
- python-3.x - 这里发生了什么“builtins.ModuleNotFoundError:没有名为'scrapy_proxy_pool'的模块”?
- python - 在Python中按特定行拆分或删除数据框/ excel文件
- vim - Vim,如何创建键绑定到:shift、ctrl、alt、cmd 键?
- vue.js - [Vue 警告]:无法解析组件:Step1Item: