如何将 3 个值(字幕和图标按钮、链接)传递给列表视图构建器中列出的每个"主题"，该值在"天"扩展磁贴下定义

Question

[目标UI项目如图中圆圈所示我的三个疑虑是：->如何在第16行和第23行通过；副标题"；到Listview中的所有6个主题；标题"；已经通过了。我试过了，但出了差错。。->不知道如何在Listview中的6个主题下分别显示图标按钮
->如何通过一个单独的6个"外部网站链接"，当按下相应的图标按钮时应该打开在这里输入图像描述

要修改的代码在下面的这个位置

https://github.com/sandeepnarula999/FlutterProjects/blob/main/ListViewUnderExpansionTile

Answer 1

您的类Entry没有任何字幕属性，我建议将该属性作为可选字符串添加为final String? subtitle，然后将构造函数更改为只调用您需要的内容，因为在根中您不需要字幕，也不调用它，然后根据您的字幕属性更改对字幕的调用。

我已经使用了你的代码，它正在与你想要的工作，检查这个：

import 'package:flutter/material.dart';
bool swapFailureTrigger = false;
// If TRUE, scrolling works well when grabbing an open expansion tile list
// If FALSE, scrolling only works if we grab a parent list OUTSIDE the items of the open expansion tile
class EntryItem extends StatelessWidget {
const EntryItem(this.entry);
final Entry entry;
Widget _buildTiles(Entry root) {
if (root.children.isEmpty) {
return ListTile(
title: Text(root.title),
subtitle: root.subtitle == null ? null : Text(root.subtitle!),
);
}
var kids = root.children.map((child) => _buildTiles(child)).toList();
return ExpansionTile(
key: PageStorageKey<Entry>(root),
title: Text(root.title),
subtitle: root.subtitle == null ? null : Text(root.subtitle!),
// <<---------- PROBLEM IS HERE if you test with the ListView.builder() version ---------->>
children: swapFailureTrigger
? root.children.map(_buildTiles).toList()
: <Widget>[
ListView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
// helps scroll all 6 items in list *not working*
key: PageStorageKey<Entry>(root),
itemCount: kids.length,
itemBuilder: (context, index) {
return kids[index];
},
//shrinkWrap: true,
//physics: ClampingScrollPhysics(), // for List View to scroll
)
],
//  <<--------------------------------------------------------------------------------->>
);
}
@override
Widget build(BuildContext context) {
return _buildTiles(entry);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of our application.
@override
Widget build(BuildContext context) {
return MaterialApp(
//title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: ''), //Flutter Expansion Issue'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: ExpansionTileExample(),
);
}
}
class ExpansionTileExample extends StatelessWidget {
const ExpansionTileExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (BuildContext context, int index) => EntryItem(data[index]),
itemCount: data.length,
);
}
}
// One entry in the multilevel list displayed by this app.
class Entry {
//Change the constructor to set each parameter and skip subtitle on root
const Entry(
{required this.title, this.children = const <Entry>[], this.subtitle});
final String title;
final List<Entry> children;
final String? subtitle; // Can be null so root won`t have it
}
// Data to display.
const List<Entry> data = <Entry>[
Entry(
title: 'Day1',
children: <Entry>[
Entry(title: 'Topic T1.1', subtitle: 'Subtitle 1.1'),
Entry(title: 'Topic T1.2', subtitle: 'Subtitle 1.2'),
Entry(title: 'Toipc T1.3', subtitle: 'Subtitle 1.3'),
Entry(title: 'Topic T1.4', subtitle: 'Subtitle 1.4'),
Entry(title: 'Topic T1.5', subtitle: 'Subtitle 1.5'),
Entry(title: 'Topic T1.6', subtitle: 'Subtitle 1.6'),
],
),
];

Answer 2

为了使代码更加干净并解决您的问题，我建议您使用以下数据结构：

class Day{
const Day(this.title, [this.children = const <Entry>[]]);
final String title;
final List<Entry> children;
}
class Entry {
const Entry(this.title, this.subtitle, this.link);
final String title;
final String subtitle;
final String link;
}
const List<Day> data = <Day>[
Day(
'Day1',
<Entry>[
...
],
),
];

有了上面的数据结构，您可以将它与您的UI集成。如果你对如何整合有任何疑问，请发表评论，我会扩大我的答案。