gpt4 book ai didi

user-interface - 如何将Widget注入(inject)自定义子Widget并使用子Widgets迭代索引?

转载 作者:IT王子 更新时间:2023-10-29 06:33:33 24 4
gpt4 key购买 nike

我正在构建一个 flutter 应用程序。我已经构建了一个带有构造函数的类。我制作了构造函数,因此我可以自定义我的 ListTile,因为我将此类用于多个页面,每次我都需要更改文本颜色,有时甚至添加一个 onTap 函数。

class AppList extends StatefulWidget {

@override
AppListState createState() => AppListState();

AppList({Key key, this.child}) : super(key: key);

final Widget child;

}

class AppListState extends State<AppList> {

Widget child;

List<Map<String, String>> _installedApps;

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

getApps() {
setState(() {
installedApps = _installedApps;
getApp();
});
}

@override
Widget build(BuildContext context) {

if (installedApps == null)
getApps();

return ListView.builder(
itemCount: installedApps == null ? 0 : installedApps.length,
itemBuilder: (context, index) {
return child; //This is where the ListTile will go.
},
);
}

}

//Just in case you were confused, I used a plugin for some of the features

在我构建这个类之后,我将它放在我的示例类中。

示例类:

class Example extends StatefulWidget {

@override
ExampleState createState() => ExampleState();

}

class ExampleState extends State<Example> {

@override
Widget build(BuildContext context) {
return MaterialApp (
debugShowCheckedModeBanner: false,
home: Scaffold (
body: Container (
color: Colors.black,
child: AppList (
child: ListTile (
title: Text(installedApps[index]["app_name"]) //this is the text
),
)
)
),
);
}

}

然后,我在其中添加了一个 ListTile 和一个文本。但是当我在写文字时,我意识到我无法输入我想要的文字。这是因为 Example 类中没有定义 'index'。

有什么好的方法可以将此文本放入我的示例类中吗?

完整代码:

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

import 'dart:async';
import 'dart:io';

import 'package:flutter_appavailability/flutter_appavailability.dart';

void main() {
SystemChrome.setEnabledSystemUIOverlays([]);
runApp(Example());
}

Future<void> getApp() async {

if (Platform.isAndroid) {

installedApps = await AppAvailability.getInstalledApps();

print(await AppAvailability.checkAvailability("com.android.chrome"));

print(await AppAvailability.isAppEnabled("com.android.chrome"));

}
else if (Platform.isIOS) {
installedApps = iOSApps;

print(await AppAvailability.checkAvailability("calshow://"));

}

}

List<Map<String, String>> installedApp;
List<Map<String, String>> installedApps;
List<Map<String, String>> iOSApps = [
{
"app_name": "Calendar",
"package_name": "calshow://"
},
{
"app_name": "Facebook",
"package_name": "fb://"
},
{
"app_name": "Whatsapp",
"package_name": "whatsapp://"
}
];

class Example extends StatefulWidget {

@override
ExampleState createState() => ExampleState();

}

class ExampleState extends State<Example> {

@override
Widget build(BuildContext context) {
return MaterialApp (
debugShowCheckedModeBanner: false,
home: Scaffold (
body: Container (
color: Colors.black,
child: AppList ()
)
),
);
}

}

class AppList extends StatefulWidget {

@override
AppListState createState() => AppListState();

AppList({Key key, this.child}) : super(key: key);

final Widget child;

}

class AppListState extends State<AppList> {

Widget child;

List<Map<String, String>> _installedApps;

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

getApps() {
setState(() {
installedApps = _installedApps;
getApp();
});
}

@override
Widget build(BuildContext context) {

if (installedApps == null)
getApps();

return ListView.builder(
itemCount: installedApps == null ? 0 : installedApps.length,
itemBuilder: (context, index) {
return ListTile (
title: Text(installedApps[index]["app_name"])
);
},
);
}

}

最佳答案

您可以传递一个 builder 函数,而不是将 Widget 传递给您的自定义 AppList,该函数返回一个 Widget 并根据需要获取参数,例如索引和所需的任何配置。类似于以下内容:

函数定义:

typedef Widget MyListTileBuilder(int index);

然后更改以下内容:

final Widget child;

final MyListTileBuilder childBuilder;

当然你需要在示例类中实现你的builder方法:

Widget MyListTileBuilderImplementation (int index) {
return ListTile (
title: Text(installedApps[index]["app_name"]) //this is the text
),
}

当您在示例类中构建 AppList 时,您将传递该方法

AppList (
childBuilder: MyListTileBuilderImplementation
)

最后在 AppList 中调用构建器,而不是添加子小部件:

    itemBuilder: (context, index) {
return childBuilder(index); //This is where the ListTile will go.
},

包含这些更改的完整代码如下所示(我不得不注释掉您未提供的引用):

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

import 'dart:async';
import 'dart:io';

//import 'package:flutter_appavailability/flutter_appavailability.dart';

typedef Widget MyListTileBuilder(int index);

void main() {
SystemChrome.setEnabledSystemUIOverlays([]);
runApp(Example());
}

Future<void> getApp() async {

if (Platform.isAndroid) {

//installedApps = await AppAvailability.getInstalledApps();

//print(await AppAvailability.checkAvailability("com.android.chrome"));

//print(await AppAvailability.isAppEnabled("com.android.chrome"));

}
else if (Platform.isIOS) {
installedApps = iOSApps;

//print(await AppAvailability.checkAvailability("calshow://"));

}

}

List<Map<String, String>> installedApp;
List<Map<String, String>> installedApps=[
{"app_name":"app1"},
{"app_name":"app2"},
{"app_name":"app3"},
];
List<Map<String, String>> iOSApps = [
{
"app_name": "Calendar",
"package_name": "calshow://"
},
{
"app_name": "Facebook",
"package_name": "fb://"
},
{
"app_name": "Whatsapp",
"package_name": "whatsapp://"
}
];

class Example extends StatefulWidget {

@override
ExampleState createState() => ExampleState();

}

class ExampleState extends State<Example> {

Widget MyListTileBuilderImplementation (int index) {
return ListTile (
title: Text(installedApps[index]["app_name"] + " index:" + index.toString()) //this is the text
);
}

@override
Widget build(BuildContext context) {
return MaterialApp (
debugShowCheckedModeBanner: false,
home: Scaffold (
body: Container (
color: Colors.white,
child: AppList (childBuilder: this.MyListTileBuilderImplementation)
)
),
);
}

}

class AppList extends StatefulWidget {

@override
AppListState createState() => AppListState();

AppList({Key key, this.childBuilder}) : super(key: key);

final MyListTileBuilder childBuilder;

}

class AppListState extends State<AppList> {

List<Map<String, String>> _installedApps;

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

getApps() {
setState(() {
installedApps = _installedApps;
getApp();
});
}

@override
Widget build(BuildContext context) {

if (installedApps == null)
getApps();

return ListView.builder(
itemCount: installedApps == null ? 0 : installedApps.length,
itemBuilder: (context, index) {
return widget.childBuilder(index);
},
);
}

}

关于user-interface - 如何将Widget注入(inject)自定义子Widget并使用子Widgets迭代索引?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54035219/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com