Flutter - 如何隐藏或设置表格行可见？

Question

我正在使用 Flutter Table 小部件。我希望根据特定条件隐藏 table 行之一。

我已经在 Table 行上尝试了可见性小部件，但它不允许。我也试过布尔条件，例如。布尔？ Tablerow(...)：Tablerow()，它似乎工作不正常，因为它给出了 null 异常 - 可能 Tablerow 是空的。

child: Table(
          border: TableBorder.all(width: 1.0, color: Colors.black),
          children: [

            TableRow(
              children: [
                TableCell(
                    child: Row(
                        children: <Widget>[
                          new Padding(
                            padding: const EdgeInsets.all(5.0),
                            child: new Text('ID1'),
                          ),
                        ]
                    )
                ),

                TableCell(
                    child: Row(
                        children: <Widget>[
                          new Padding(
                            padding: const EdgeInsets.all(5.0),
                            child: new Text('Name1'),
                          ),
                        ]
                    )
                )
              ]
            ),

            TableRow(
                children: [
                  TableCell(
                      child: Row(
                          children: <Widget>[
                            new Padding(
                              padding: const EdgeInsets.all(5.0),
                              child: new Text('ID2'),
                            ),
                          ]
                      )
                  ),

                  TableCell(
                      child: Row(
                          children: <Widget>[
                            new Padding(
                              padding: const EdgeInsets.all(5.0),
                              child: new Text('Name2'),
                            ),
                          ]
                      )
                  )
                ]
            ),


            TableRow(
                children: [
                  TableCell(
                      child: Row(
                          children: <Widget>[
                            new Padding(
                              padding: const EdgeInsets.all(5.0),
                              child: new Text('ID3'),
                            ),
                          ]
                      )
                  ),

                  TableCell(
                      child: Row(
                          children: <Widget>[
                            new Padding(
                              padding: const EdgeInsets.all(5.0),
                              child: new Text('Name3'),
                            ),
                          ]
                      )
                  )
                ]
            ),

          ],
        )

更新：

bool_row ? TableRow(
                children: [
                  TableCell(
                      child: Row(
                          children: <Widget>[
                            new Padding(
                              padding: const EdgeInsets.all(5.0),
                              child: new Text('ID2'),
                            ),
                          ]
                      )
                  ),

                  TableCell(
                      child: Row(
                          children: <Widget>[
                            new Padding(
                              padding: const EdgeInsets.all(5.0),
                              child: new Text('Name2'),
                            ),
                          ]
                      )
                  )
                ]
            ) : TableRow(),

使用boolean方法，bool_row为false，第二个条件"TableRow()"抛出错误：
: 在 null 上调用了方法 'any'。
：接收者：空
：尝试调用：any(Closure: (Widget) => bool)

我不知道如何生成空的不可见Table行。

根据上面的代码，如果我想隐藏或设置第 2 行不可见。我怎样才能实现它？

提前致谢！

Answer 1

您可以执行以下操作，以编程方式隐藏和显示 table 行，我们使用 "visibilityTableRow" 布尔变量并基于此决定是否在 table 单元格中传递某些内容：

import 'package:flutter/material.dart';

class MyTable extends StatefulWidget {
  createState() {
    return StateKeeper();
  }
}

class StateKeeper extends State<MyTable> {

  bool visibilityTableRow = true;

  void _changed() {
    setState(() {
      if(visibilityTableRow){
        visibilityTableRow = false;
      }else{
        visibilityTableRow = true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      primary: true,
      appBar: AppBar(
        title: Text("Table View"),
      ),

      body: Column(
        children: <Widget>[

          Table(
            border: TableBorder.all(width: 1.0, color: Colors.black),
            children: [

              TableRow(
                  children: [
                    TableCell(
                        child: Row(
                            children: <Widget>[
                              new Padding(
                                padding: const EdgeInsets.all(5.0),
                                child: new Text('ID1'),
                              ),
                            ]
                        )
                    ),

                    TableCell(
                        child: Row(
                            children: <Widget>[
                              new Padding(
                                padding: const EdgeInsets.all(5.0),
                                child: new Text('Name1'),
                              ),
                            ]
                        )
                    )
                  ]
              ),

              visibilityTableRow ? TableRow(
                  children: [
                    TableCell(
                        child: Row(
                            children: <Widget>[
                              new Padding(
                                padding: const EdgeInsets.all(5.0),
                                child: new Text('ID2'),
                              ),
                            ]
                        )
                    ),

                    TableCell(
                        child: Row(
                            children: <Widget>[
                              new Padding(
                                padding: const EdgeInsets.all(5.0),
                                child: new Text('Name2'),
                              ),
                            ]
                        )
                    )
                  ]
              ): new TableRow(
                  children: [
                    TableCell(
                        child: Row(
                            children: <Widget>[
                              new Container(),
                            ]
                        )
                    ),

                    TableCell(
                        child: Row(
                            children: <Widget>[
                              new Container(),
                            ]
                        )
                    )
                  ]
              ),


              TableRow(
                  children: [
                    TableCell(
                        child: Row(
                            children: <Widget>[
                              new Padding(
                                padding: const EdgeInsets.all(5.0),
                                child: new Text('ID3'),
                              ),
                            ]
                        )
                    ),

                    TableCell(
                        child: Row(
                            children: <Widget>[
                              new Padding(
                                padding: const EdgeInsets.all(5.0),
                                child: new Text('Name3'),
                              ),
                            ]
                        )
                    )
                  ]
              ),

            ],
          ),


          RaisedButton(
            child: Text("Hide/Show Table Row"),
            onPressed: () => _changed(),
          ),
        ],
      )
    );
  }
}

Answer 2

我遇到了同样的问题，我用这个解决了：

List<TableRow> _myRows(){
  List<TableRow> rows = [];

  if(bool_row){ 
    rows.add(
      TableRow(
          children: [
            TableCell(
                child: Row(
                    children: <Widget>[
                      new Padding(
                        padding: const EdgeInsets.all(5.0),
                        child: new Text('ID2'),
                      ),
                    ]
                )
            ),
            TableCell(
                child: Row(
                    children: <Widget>[
                      new Padding(
                        padding: const EdgeInsets.all(5.0),
                        child: new Text('Name2'),
                      ),
                    ]
                )
            )
          ]
      )
    );
  }

  //here add others Rows with rows.add(TableRow(...)) ...

  return rows;
}

// In Table Widget
... 
Table(
  children: _myRows(),
),
...