Flutter：如果值為 null 或沒有值，如何隱藏 TableRow

Question

我有 2 個 JSON 案例如下

案例1：“國家”的一個值是null

[
  {
    "id": 1,
    "continent": "North America",
    "country": "United States"
  },
  {
    "id": 2,
    "continent": "Europe",
    "country": "Germany"
  },
  {
    "id": 3,
    "continent": "Asia",
    "country": null
  }
]

案例2：“國家”之一沒有價值

[
  {
    "id": 1,
    "continent": "North America",
    "country": "United States"
  },
  {
    "id": 2,
    "continent": "Europe",
    "country": "Germany"
  },
  {
    "id": 3,
    "continent": "Asia"
  }
]

我使用TableRow在Table中顯示“大陸”和“國家”，

TableRow(children: [
                      TableCell(child: Text(continent.continent)), 
                      TableCell(child: Text(continent.country))])

但是如果 List 或continent.country == null => 我不想顯示TableRow中沒有“國家”，所以請幫我設置以下條件：

1. 情況1
2. 案例二
3. 案例 1 + 案例 2

這是主文件：

import 'package:ask/services/continent_services2.dart';
import 'package:flutter/material.dart';
import 'model/continent_model2.dart';

class TableRowDemo extends StatefulWidget {
  TableRowDemo() : super();

  @override
  _ContinentPageState createState() => _ContinentPageState();
}

class _ContinentPageState extends State<TableRowDemo> {
  List<Continent> _continent;

  @override
  void initState() {
    super.initState();

    ContinentServices2.getContinent().then((continents) {
      setState(() {
        _continent = continents;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('')),
      body: Column(
        children: <Widget>[
          for (Continent continent in _continent)
            SingleChildScrollView(
              child: Table(children: [
                continent.country == null
                    ? Container() // Error: type 'Container' is not a subtype of type 'TableRow'
                    : TableRow(children: [
                      TableCell(child: Text(continent.continent)),
                      TableCell(child: Text(continent.country))]),
              ]),
            ),
        ],
      ),
    );
  }
}

Answer 1

您應該將大陸重命名為“區域”或“區域”，並且可以使用簡單的 if 條件：

(...)
Table(children: [
    for (Zone zone in zones)
        If (zone.country != null )
            TableRow(children[
                TableCell(child: Text(zone.continent)),
                TableCell(child: Text(zone.country)),
          ])
    )

Answer 2

如果您升級到最新Flutter SDK (Dart >=2.3) ，那么您可以使用簡單的if語句來有條件地呈現 TableRow 或任何其他小部件。

...
If(continent.country != null)
     TableRow(children: [
          TableCell(child: Text(continent.continent)),
          TableCell(child: Text(continent.country))]),
              ]

這是實現過濾的完整示例：

import 'package:flutter/material.dart';


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

class TableExample extends StatefulWidget {
  @override
  _TableExampleState createState() => _TableExampleState();
}

class _TableExampleState extends State<TableExample> {
  List continents = [
    {"id": 1, "continent": "North America", "country": "United States"},
    {"id": 2, "continent": "Europe", "country": "Germany"},
    {"id": 3, "continent": "Asia", "country": null}
  ];
  List _continents = [];



  @override
  void initState() {
    super.initState();

  // filtering of data
    setState(() {
      _continents =
          continents.where((element) => element["country"] != null).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("Table Example"),
      ),
      body: Column(
        children: <Widget>[
          for (Map<String, dynamic> continent in _continents)
            SingleChildScrollView(
              child: Table(children: [
                TableRow(children: [
                  TableCell(child: Text(continent["continent"])),
                  TableCell(child: Text(continent["country"]))
                ]),
              ]),
            ),
        ],
      ),
    ));
  }
}

Output：