Flutter:尝试根据布尔值是否为真或假有条件地显示小部件

huangapple go评论67阅读模式
英文:

Flutter: Trying to display a widget conditionally based on whether a bool is true or false

问题

我想根据一个布尔类型的变量是true还是false来显示一个小部件。但是我遇到了错误:_TypeError(类型'Null'不是类型'Widget'的子类型)。

import 'package:expense_tracker/Models/expense.dart';
import 'package:flutter/material.dart';

class ExpensesItem extends StatelessWidget {
  const ExpensesItem(this.isAdditionalDisplayed, this.expense, {super.key,});

  final Expense expense;
  final bool isAdditionalDisplayed; //这里是布尔变量

  _displayAdditional() {
    if(isAdditionalDisplayed == true) {
      return Column(
        children: [
          Row(
            children: [
              SizedBox(
                height: 100,
                width: 360,
                child: Text(expense.additional))],
                )
              ],
            );
    }
    if(isAdditionalDisplayed == false) {
      return SizedBox(height: 0,);
    }
  } //这里我检查_displayAdditional是true还是false。如果是true,就显示小部件,如果是false,就显示一个空的SizedBox。

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 20,
          vertical: 16,
        ),
        child: Column(
          children: [
            Text(expense.title),
            const SizedBox(height: 4),
            Column(
              children: [
                Row(
                  children: [
                    SizedBox(
                      height: 100,
                      width: 360,
                      child: Text(expense.additional))],
                )
              ],
            ),
            _displayAdditional(), //这里应该显示小部件。这是我遇到错误的地方
          ],
        ),
      ),
    );
  }
}

尝试在第二个if语句中添加检查_isAdditionalDisplayed是否为null的条件。这将导致错误,表示它不能为null,并且始终为false:

if(isAdditionalDisplayed == false || isAdditionalDisplayed == null) {

错误:
操作数不能为null,因此条件始终为“false”。
尝试删除条件、包含条件或整个条件语句。

尝试在调用_displayAdditional时添加感叹号:

_displayAdditional()!,

错误:
_TypeError(在空值上使用了空值检查运算符)

如果同时进行这两种更改,将会同时出现这两种错误。如果只进行其中一种更改,将会出现其中一种错误。

这很令人困惑。在一个地方它说isAdditionalDisplayed不能为null,在另一个地方它说它是null。

英文:

I want to display a widget based on whether a variable that is a bool is true or false. However I get the error: _TypeError (type 'Null' is not a subtype of type 'Widget').

import 'package:expense_tracker/Models/expense.dart';
import 'package:flutter/material.dart';

class ExpensesItem extends StatelessWidget {
  const ExpensesItem(this.isAdditionalDisplayed, this.expense, {super.key,});

  final Expense expense;
  final bool isAdditionalDisplayed; //HERE IS THE BOOL VARIABLE

  _displayAdditional() {
    if(isAdditionalDisplayed == true) {
      Column(
        children: [
          Row(
            children: [
              SizedBox(
                height: 100,
                width: 360,
                child: Text(expense.additional))],
                )
              ],
            );
    }
    if(isAdditionalDisplayed == false) {
      SizedBox(height: 0,);
    }
  } //HERE I ASK IF _DISPLAYADDITIONAL IS TRUE OR FALSE. IF ITS TRUE IT DISPLAYS THE WIDGET, IF IT'S FALSE IT DISPLAYS AN EMPTY SIZEDBOX.

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 20,
          vertical: 16,
        ),
        child: Column(
          children: [
            Text(expense.title),
            const SizedBox(height: 4),
            Column(
              children: [
                Row(
                  children: [
                    SizedBox(
                      height: 100,
                      width: 360,
                      child: Text(expense.additional))],
                )
              ],
            ),
            _displayAdditional(), //HERE THE WIDGET SHOULD BE DISPLAYED. THIS IS WHERE I GET THE ERROR
          ],
        ),
      ),
    );
  }
}

Tried adding to the 2nd if statement to check if _isAdditionalDisplayed is null. This gives the error that it can't be null and will always be false:
if(isAdditionalDisplayed == false || isAdditionalDisplayed == null) {
Error:
The operand can't be null, so the condition is always 'false'.
Try removing the condition, an enclosing condition, or the whole conditional statement.

Tried adding an exclimation mark when _displayAdditional is called:
_displayAdditional()!,
Error:
_TypeError (Null check operator used on a null value)

With both of those changes at once I get both errors. With one or the other I get one or the other errors.

This is very confusing. In one place it's saying isAdditionalDisplayed can't be null. In another it's saying it is null.

答案1

得分: 1

看起来问题在于你没有从函数中返回小部件。

import 'package:expense_tracker/Models/expense.dart';
import 'package:flutter/material.dart';

class ExpensesItem extends StatelessWidget {
  const ExpensesItem(this.isAdditionalDisplayed, this.expense, {super.key,});

  final Expense expense;
  final bool isAdditionalDisplayed;

  Widget _displayAdditional() {
    return isAdditionalDisplayed ? Column(
        children: [
          Row(
            children: [
              SizedBox(
                height: 100,
                width: 360,
                child: Text(expense.additional))],
                )
              ],
            ) : SizedBox.shrink();
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 20,
          vertical: 16,
        ),
        child: Column(
          children: [
            Text(expense.title),
            const SizedBox(height: 4),
            Column(
              children: [
                Row(
                  children: [
                    SizedBox(
                      height: 100,
                      width: 360,
                      child: Text(expense.additional))],
                )
              ],
            ),
            _displayAdditional(), 
          ],
        ),
      ),
    );
  }
}
英文:

Looks like the issue is you are not returning the widgets from the function.

import 'package:expense_tracker/Models/expense.dart';
import 'package:flutter/material.dart';

class ExpensesItem extends StatelessWidget {
  const ExpensesItem(this.isAdditionalDisplayed, this.expense, {super.key,});

  final Expense expense;
  final bool isAdditionalDisplayed;

  Widget _displayAdditional() {
    return isAdditionalDisplayed ? Column(
        children: [
          Row(
            children: [
              SizedBox(
                height: 100,
                width: 360,
                child: Text(expense.additional))],
                )
              ],
            ) : SizedBox.shrink();
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 20,
          vertical: 16,
        ),
        child: Column(
          children: [
            Text(expense.title),
            const SizedBox(height: 4),
            Column(
              children: [
                Row(
                  children: [
                    SizedBox(
                      height: 100,
                      width: 360,
                      child: Text(expense.additional))],
                )
              ],
            ),
            _displayAdditional(), 
          ],
        ),
      ),
    );
  }
}

huangapple
  • 本文由 发表于 2023年6月22日 04:45:36
  • 转载请务必保留本文链接:https://go.coder-hub.com/76527017.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定