Question

我正在使用Flutter Table小部件。我希望根据某些条件隐藏表格行之一。

我在Tablerow上尝试过Visibility小部件，但不允许这样做。我也尝试过布尔条件，例如。布尔？ Tablerow（...）：Tablerow（），它给出了空异常，因此似乎无法正常工作-可能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(),

使用布尔方法，bool_row为false，第二个条件“ TableRow（）”引发错误：
：方法“ any”在null上被调用。
：接收者：null
：尝试调用：any（关闭：（小部件）=> bool）

我不知道如何生成一个空的不可见TableRow。

基于上面的代码，如果我想隐藏第二行或将其设置为不可见。我该如何实现？

谢谢！

Answer 1

我遇到了同样的问题，并为此解决了：

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(),
),
...

Answer 2

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

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

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

2 个答案: