Flutter组件间传值与立方体面积计算问题咨询

问题说明 #

我正在尝试计算立方体的面积，为此创建了一个包含Slider的ChooseArea组件，用于获取高度和宽度值。但不清楚如何将这两个值传递到HomePage进行计算，也不知道如何将计算结果保存到变量中。

界面效果：

解决方案 #

通过回调函数实现子组件向父组件传递Slider的值，在父组件中维护状态并实时计算面积，具体修改如下：

1. 修改ChooseArea组件，添加回调参数 #

将ChooseArea改为无状态组件，把Slider的状态交由父组件控制，同时添加回调函数用于传递值：

class ChooseArea extends StatelessWidget {
  ChooseArea({
    Key? key,
    required this.slidString,
    required this.currentValue,
    required this.onValueChanged,
  }) : super(key: key);

  final String slidString;
  final double currentValue;
  final ValueChanged<double> onValueChanged;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Row(
        children: [
          Padding(
              padding: const EdgeInsets.only(left: 7),
              child: Text(slidString))
        ],
      ),
      Row(children: [
        SizedBox(
          width: 250,
          child: Slider(
              value: currentValue,
              label: "${currentValue.toStringAsFixed(2)} m",
              divisions: 100,
              min: 1,
              max: 50,
              onChanged: onValueChanged),
        ),
        SizedBox(width: 20),
        Text("${currentValue.toStringAsFixed(2)} m")
      ])
    ]);
  }
}

2. 修改HomePage，维护状态并计算面积 #

在HomePage的状态类中添加高度、宽度和面积的状态变量，通过回调接收子组件的值并实时计算：

class HomePage extends Stateful Widget {
  const HomePage({super.key, required this.title});
  final String title;
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late double heightScreen, widthScreen;
  double _height = 1;
  double _width = 1;
  double _area = 1;

  @override
  void initState() {
    super.initState();
    _calculateArea();
  }

  void _calculateArea() {
    setState(() {
      // 若为立方体表面积，可改为 2 * (_height*_width + _height*_height + _width*_height)
      _area = _height * _width;
    });
  }

  @override
  Widget build(BuildContext context) {
    heightScreen =
        MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top;
    widthScreen = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test "),
      ),
      body: Column(
        children: [
          SizedBox(height: 20),
          ChooseArea(
            slidString: "Height",
            currentValue: _height,
            onValueChanged: (value) {
              setState(() => _height = value);
              _calculateArea();
            },
          ),
          SizedBox(height: 20),
          ChooseArea(
            slidString: "Width",
            currentValue: _width,
            onValueChanged: (value) {
              setState(() => _width = value);
              _calculateArea();
            },
          ),
          SizedBox(height: 40),
          Text(
            "立方体面积: ${_area.toStringAsFixed(2)} ㎡",
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
        ],
      ),
    );
  }
}

核心说明 #

• 将子组件的状态转移到父组件管理，符合Flutter单向数据流的设计原则
• 通过ValueChanged<double>回调实现子组件向父组件传值，Slider滑动时触发计算逻辑
• 实时更新并展示计算后的面积结果

内容的提问来源于stack exchange，提问作者Lucas Barreto Luz