Flutter切换组件

Question

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

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

Answer 1

使用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列表的值来显示或隐藏对应的子组件。

希望可以帮助到您