首页 > 解决方案 > 如何在颤动的扩展磁贴列表中包含单选按钮

问题描述

我想要一个扩展列表列表,其中每个扩展列表必须包含 3 个单选按钮。我最近开始颤抖,所以请帮助我

标签: flutter

解决方案


使用包 grouped_buttons 并设置动态条目二级
条目级别 1 是 ExpansionTile,条目级别 2 是单选按钮

条目的代码片段

final List<Entry> data = <Entry>[
  Entry(
    'Chapter A',
    <Entry>[
      Entry('A0'),
      Entry('A1'),
      Entry('A2'),
    ],
  )

完整代码

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

class ExpansionTileSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ExpansionTile'),
        ),
        body: 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 {
  Entry(this.title, [this.children = const <Entry>[]]);

  final String title;
  final List<Entry> children;
}

// The entire multilevel list displayed by this app.
final List<Entry> data = <Entry>[
  Entry(
    'Chapter A',
    <Entry>[
      Entry('A0'),
      Entry('A1'),
      Entry('A2'),
    ],
  ),
  Entry(
    'Chapter B',
    <Entry>[
      Entry('B0'),
      Entry('B1'),
      Entry('B2'),
    ],
  ),
  Entry(
    'Chapter C',
    <Entry>[
      Entry('C0'),
      Entry('C1'),
      Entry('C2'),
    ],
  ),
];

// Displays one Entry. If the entry has children then it's displayed
// with an ExpansionTile.
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));
    return ExpansionTile(
      key: PageStorageKey<Entry>(root),
      title: Text(root.title),
      children: <Widget>[
        RadioButtonGroup(
            labels: root.children.map((child) => child.title).toList(),
            onSelected: (String selected) => print(selected)),
      ],
    ); //root.children.map(_buildTiles).toList(),
  }

  @override
  Widget build(BuildContext context) {
    return _buildTiles(entry);
  }
}

void main() {
  runApp(ExpansionTileSample());
}

在此处输入图像描述


推荐阅读