如何在Flutter中隐藏或显示一行中的图标

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

How to hide or show an icon in a row in Flutter

问题

我有一行包括3个图标,但其中一个需要在有笔记时显示,没有笔记时隐藏。

我尝试使用Visibility,但无法做对。如果没有笔记,我需要使用SizedBox(),以便其他内容保持正确对齐。

应该如何正确做这个?

Expanded(
  flex: 14,
  child: Center(
    child: GestureDetector(
      onTap: () {
        print(data[index].rosterId);
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => ShiftsForRoster(
              rId: data[index].rosterId,
            ),
          ),
        );
      },
      child: Icon(Icons.note_alt_outlined, size: 35, color: kMainColor80),
    ),
  ),
),
英文:

I have a row which includes 3 icons, but one of them needs to be shown if notes have been added, but hidden if there are no notes.

I tried to use Visibility but couldn't get it right. If there are no notes, I need to use a SizedBox() so everything else stays aligned correctly.

What's the right way to do this?

    Expanded(
      flex: 14,
      child: Center(
        child: GestureDetector(
          onTap: () {
            print(data[index].rosterId);
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => ShiftsForRoster(
                  rId: data[index].rosterId,
                ),
              ),
            );
          },
          child: Icon(Icons.note_alt_outlined, size: 35, color: kMainColor80),
        ),
      ),
    ),

答案1

得分: 0

我看不出你的代码片段中如何检查是否存在便笺。我使用了一个名为 "notesExist" 的布尔值来检查它是否为真,如果是真的就显示图标,否则显示一个空的容器。你也可以像这样做:notes.length != 0

Expanded(
  flex: 14,
  child: notesExist ? Center(
    child: GestureDetector(
      onTap: () {
        print(data[index].rosterId);
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => ShiftsForRoster(
              rId: data[index].rosterId,
            ),
          ),
        );
      },
      child: Icon(Icons.note_alt_outlined, size: 35, color: kMainColor80),
    ),
  ) : Container()
),
英文:

I can't see in your code snippet, how you check if you have notes or not. I used a bool "notestExist", check if it's true and show your icon, else show an empty Container. You could also do something like notes.length != 0

  Expanded(
  flex: 14,
  child: notesExist ? Center(
    child: GestureDetector(
      onTap: () {
        print(data[index].rosterId);
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => ShiftsForRoster(
              rId: data[index].rosterId,
            ),
          ),
        );
      },
      child: Icon(Icons.note_alt_outlined, size: 35, color: kMainColor80),
    ),
  ) : Contaniner()
),

huangapple
  • 本文由 发表于 2023年2月8日 17:22:59
  • 转载请务必保留本文链接:https://go.coder-hub.com/75383594.html
匿名

发表评论

匿名网友

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

确定