颤动的表格中的可扩展行 - 有可能吗？

Question

我正在尝试一种方法来扩展表格中的行，但似乎没有任何效果。

我想点击表格中的某一行并使其可扩展以显示更多关于该 ROW 的数据，然后第二次按下会将其关闭回到表格中。

我尝试使用 Expanded 小部件，但它不起作用：

import 'package:flutter/material.dart';

class StagePage extends StatelessWidget {
  const StagePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Table(
          defaultColumnWidth: FixedColumnWidth(120.0),
          border: TableBorder.all(
              color: Colors.black,
              style: BorderStyle.solid,
              width: 2),
          children: [
      TableRow( children: [
      Column(children:[Text('Website', style: TextStyle(fontSize: 20.0))]),
    Column(children:[Text('Tutorial', style: TextStyle(fontSize: 20.0))]),
    Column(children:[Text('Review', style: TextStyle(fontSize: 20.0))]),
    Card(
    child: ExpansionTile(
    title: Text(
    'Website',
    style: TextStyle(fontSize: 20.0),
    ),
    children: <Widget>[
    Text('About Website'),
    Text('Add more data'),
    Text('add more more data'),
    // add more data that you want like this
    ],
    ),
    )],
      ),]
    )


    );
  }
}

任何帮助或建议都会很棒！谢谢！

这是我的代码的结果： 但我想打开没有线条和表格边框的所有行。

Answer 1

您可以为此使用 ExpansionPanelList 小部件或 expandable 依赖项。

Answer 2

使用 Card 包装您需要扩展的每个小部件， 并在Card 中添加ExpansionTile

例子-

Card(
    child: ExpansionTile(
      title: Text(
        'Website',
        style: TextStyle(fontSize: 20.0),
      ),
      children: <Widget>[
        Text('About Website'),
        Text('Add more data'),
        Text('add more more data'),
        // add more data that you want like this
      ],
    ),
  );