☰

Flutterでプログラム的にウィジェットを表示/非表示にする方法 質問する

tag-icon • tag-icon flutter dart flutter-layout flutter-widget
Flutterでプログラム的にウィジェットを表示/非表示にする方法 質問する

Androidでは、すべてのViewサブクラスにオブジェクトsetVisibility()の可視性を変更できるメソッドがあります。View

可視性を設定するには 3 つのオプションがあります。

  • 表示:Viewレイアウト内の表示部分をレンダリングします
  • 非表示: を非表示にしますが、が表示された場合に が占めるViewスペースに相当する隙間を残します。View
  • 非表示: を非表示にしView、レイアウトから完全に削除します。heightとwidthが0dp

Flutter のウィジェットには上記に相当するものはありますか?

クイックリファレンス:https://developer.android.com/reference/android/view/View.html#attr_android:可視性

ベストアンサー1

意味：

非表示: ウィジェットは画面上の物理的なスペースを占有しますが、ユーザーには見えません。これはVisibilityウィジェットを使用して実現できます。

消えた: ウィジェットは物理的なスペースを占有せず、完全に消えます。これはVisibility、、ifまたはif-else条件を使用して実現できます。

目に見えない例:

Visibility(
  child: Text("Invisible"),
  maintainSize: true, 
  maintainAnimation: true,
  maintainState: true,
  visible: false, 
),

消えた例:

Visibility(
  child: Text("Gone"),
  visible: false,
),

使用方法if:

  • 子ども1人の場合:

    Column(
  children: <Widget>[
    Text('Good Morning'), // Always visible
    if (wishOnePerson) Text(' Mr ABC'), // Only visible if condition is true
  ],
)

  • 複数のお子様がいる場合:

    Column(
  children: [
    Text('Good Morning'), // Always visible
    if (wishAll) ... [ // These children are only visible if condition is true
      Text('Mr ABC'),
      Text('Mr DEF'),
      Text('Mr XYZ'),
    ],
  ],
)

使用方法if-else:

  • 子ども1人の場合:

    Column(
  children: <Widget>[
    // Only one of them is visible based on 'isMorning' condition
    if (isMorning) Text('Good Morning')
    else Text ('Good Evening'),
  ],
)

  • 複数のお子様がいる場合:

    Column(
  children: [
    // Only one of the children will be shown based on `beforeSunset` condition
    if (beforeSunset) ... [
      Text('Good morning'),
      Text('Good afternoon'),
    ] else ... [
      Text('Good evening'),
      Text('Good night'),
    ],
  ],
)

おすすめ記事