如何将 3 个值（字幕和 IconButton，link）传递给在 'Day' 扩展磁贴下定义的 Listview Builder 中列出的每个 'Topics'

Question

[目标UI项目如图中圆圈标记我的3个疑惑是： ->如何在第 16 行和第 23 行中通过，“副标题”到列表视图中的所有 6 个主题，因为“标题”已经 passed.I 尝试过，但我遇到了错误.. ->不知道如何在列表视图中的 6 个主题中的每一个下显示图标按钮
->如何传递一个单独的 6 'external website links'，当按下相应的图标按钮时应该打开它 enter image description here

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

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

Answer 1

你的 class Entry 没有任何副标题属性，我的建议是添加属性作为可选字符串 final String? subtitle，然后更改构造函数以仅调用您需要的内容，因为在 root 中您不需要字幕，您不调用它，然后根据您的字幕属性.

更改您对字幕的调用

我已经使用了您的代码，它可以按照您的要求运行，检查一下：

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 集成。如果您对如何集成有任何疑问，请发表评论，我会扩展我的答案。

如何将 3 个值（字幕和 IconButton，link）传递给在 'Day' 扩展磁贴下定义的 Listview Builder 中列出的每个 'Topics'

How to Pass 3 values (subtitle& IconButton, link) to each 'Topics' listed in Listview Builder which is defined under 'Day' Expansion tile

flutter

flutter-layout