当array为null []并且样式不起作用时，颤振显示空间

Question

在我的屏幕上，数据[index] ['text']在没有值但样式不起作用时显示[] 当不存在时如何显示空格而不是[]？

return ListTile(
     title: Html(data: """<br> """ + data[index]['id'] + ' - ' + data[index]['value'] + ' - ' + """ <span style="color: red"> """ + (data[index]['text']) + """ </b> """ + """ """),
     trailing: Icon(Icons.keyboard_arrow_right),
     onTap: () => Navigator.pushNamed(context, '/approve', arguments:
 data[index]['id'].toString()),
     isThreeLine: false,
     dense: true,
);

Answer 1

了解

1）null-aware operators（如果为null，则为替代表达式，也称为三元运算符的简写形式）

2）string interpolation（以避免长时间级联）

解决方案：

return ListTile(
  title: Html(
    data: "<br/> ${data[index]['id']} - ${data[index]['value']} - <b>${data[index]['text'] ?? "&nbsp;"}</b>"
  ),
  trailing: Icon(Icons.keyboard_arrow_right),
  onTap: () => Navigator.pushNamed(context, '/approve', arguments:
 data[index]['id'].toString()),
  isThreeLine: false,
  dense: true,
);

Answer 2

return ListTile(
    title: Html(data: """<br> """ + data[index]['id'] + ' - ' + data[index]['value'] + ' - ' + """ <b> """ + (data[index]['text'] != null ? data[index]['text'] : " " )  + """ </b> """ + """ """),
    trailing: Icon(Icons.keyboard_arrow_right),
    onTap: () => Navigator.pushNamed(context, '/approve', arguments:
    data[index]['id'].toString()),
    isThreeLine: false,
    dense: true,
);