table 中的可扩展行带有抖动 - 这可能吗？

Question

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

我想单击 table 中的某一行并使其可扩展以显示有关 ROW 的更多数据，然后第二次按下会将其关闭回到 table.

我尝试使用扩展小部件，但没有用：

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
    ],
    ),
    )],
      ),]
    )


    );
  }
}

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

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

Answer 1

用 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
      ],
    ),
  );

Answer 2

您可以为此使用 ExpansionPanelList widget or expandable 依赖项。

table 中的可扩展行带有抖动 - 这可能吗？

Expandable row in table with flutter- is it possible?

dart

flutter

flutter-layout