Flutter切换组件

求问 Flutter 项目怎么样能实现组建的切换,比如说

img


点击预算时,下面展示预算模块,点击余额时显示余额模块,有没有好的办法啊 现在用的是ToggleButtons组件,请问用这个能实现吗

使用ToggleButtons组件也可以实现组件的切换,您可以在ToggleButtons组件中设置不同的标签,并在点击标签时切换对应的组件的显示和隐藏。


List<bool> _selections = [true, false]; // 初始状态下显示第一个组件

ToggleButtons(
  children: [
    Text('预算'),
    Text('余额'),
  ],
  isSelected: _selections,
  onPressed: (int index) {
    setState(() {
      for (int i = 0; i < _selections.length; i++) {
        _selections[i] = (i == index);
      }
    });
  },
),

// 在组件中根据_selections的值来显示或隐藏对应的子组件
Visibility(
  visible: _selections[0],
  child: BudgetComponent(),
),
Visibility(
  visible: _selections[1],
  child: BalanceComponent(),
),

在上面的代码中,使用ToggleButtons组件实现标签的切换,使用Visibility组件来控制对应的子组件的显示和隐藏。当点击标签时,通过修改_selections的值切换对应的组件的显示和隐藏

注意,使用ToggleButtons组件时需要注意以下几点:

  • ToggleButtons组件需要一个bool类型的isSelected列表来表示各个标签的选中状态。
  • 在onPressed回调中,需要更新isSelected列表的值,以便切换对应的组件的显示和隐藏。
  • 在组件中根据isSelected列表的值来显示或隐藏对应的子组件。

希望可以帮助到您