Flutter中Toggle Button切换调用Container组件的实现疑问

核心问题：不需要用void方法返回Container #

void方法无法返回Widget，你可以直接在build方法里通过条件判断渲染对应的Container，或者把每个Container的创建逻辑提取成返回Widget类型的方法（比如Widget _buildContainer1()），这样代码更清晰，但不是必须的。

你的代码问题及修正方案 #

现有代码存在几个问题：

• 全局变量_selecteddatamaster容易导致状态混乱，应该移到State类内部
• ToggleButtons的onPressed里的空if语句没用，且状态更新逻辑可以简化
• TestbayToggle的build方法只返回了Toggle按钮栏，没有添加切换显示的Container区域

以下是修正后的完整代码：

import 'package:flutter/material.dart';

class TestbayToggle extends StatefulWidget {
  const TestbayToggle({Key? key}) : super(key: key);

  @override
  TestbayToogleState createState() => TestbayToogleState();
}

class TestbayToogleState extends State<TestbayToggle> {
  // 将状态移到State类内部，避免全局污染
  final List<bool> _selecteddatamaster = <bool>[true, false];
  List<Widget> datamaster = const <Widget>[
    Text('Formulir'),
    Text('List Data'),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        // 顶部Toggle按钮栏
        Container(
          width: 1000,
          height: 50,
          decoration: BoxDecoration(
              color: Colors.grey[400],
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(8), topRight: Radius.circular(8))),
          child: ToggleButtons(
            onPressed: (int index) {
              setState(() {
                // 简化状态更新逻辑
                for (int i = 0; i < _selecteddatamaster.length; i++) {
                  _selecteddatamaster[i] = i == index;
                }
              });
            },
            borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(8), topRight: Radius.circular(8)),
            selectedColor: Colors.black,
            fillColor: Colors.white,
            renderBorder: false,
            color: Colors.white,
            constraints: const BoxConstraints(
              minHeight: 40.0,
              minWidth: 100.0,
            ),
            isSelected: _selecteddatamaster,
            children: datamaster,
          ),
        ),
        // 根据选中状态切换显示对应的Container
        _selecteddatamaster[0] ? const Container1() : const Container2(),
      ],
    );
  }
}

class Container1 extends StatefulWidget {
  const Container1({Key? key}) : super(key: key);

  @override
  State<Container1> createState() => _Container1State();
}

class _Container1State extends State<Container1> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8),
      child: Container(
        width: 1000,
        height: 500,
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(8), bottomRight: Radius.circular(8)),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [Text("test1")],
          ),
        ),
      ),
    );
  }
}

class Container2 extends StatelessWidget {
  const Container2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8),
      child: Container(
        width: 1000,
        height: 500,
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(8), bottomRight: Radius.circular(8)),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [Text("test2")],
          ),
        ),
      ),
    );
  }
}

关键说明 #

• 状态管理：把_selecteddatamaster移到State类内部，确保状态只属于当前组件实例
• 切换逻辑：用_selecteddatamaster[0] ? const Container1() : const Container2()直接根据选中状态渲染对应组件，简单直观
• 代码结构：如果后续Container逻辑复杂，可以把它们的创建提取成单独的Widget方法，比如：

  Widget _buildContainer1() {
    return const Container1();
  }
  

  然后在build里调用_buildContainer1()即可，这样代码更易维护。

内容的提问来源于stack exchange，提问作者Savrener