颤振组件如何组合在一起？答案

【问题标题】：How do flutter components fit together?颤振组件如何组合在一起？
【发布时间】：2022-06-20 21:48:33
【问题描述】：

我正在为应该是快速的应用程序工作而感到振奋。我肯定错过了什么。有人可以解释一下有状态的组件是如何组合在一起的吗？如果我有一个以 JSON 形式提供数据结构的 Web 服务 API，并且我想在我的应用程序中显示其中的一部分，并且我想将显示分解为组件，那么这些组件如何与 JSON 的不同位相关联？

最简单的，我有一个显示电池电量的组件：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class BatteryPainter extends CustomPainter {
  double level;

  BatteryPainter({this.level = 0.75});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.green
      ..strokeWidth = 5
      ..strokeJoin = StrokeJoin.round
      ..style = PaintingStyle.stroke;

    Rect rect = Rect.fromCenter(
      center: Offset(size.width / 2, size.height),
      width: size.width * 0.9,
      height: 50,
    );

    RRect rr = RRect.fromRectAndRadius(rect, const Radius.circular(5));

    canvas.drawRRect(rr, paint);

    rect = Rect.fromCenter(
      center: Offset(size.width / 2, size.height),
      width: size.width * 0.9 - 10,
      height: 40
    );

    double right = rect.left + (rect.right - rect.left) * level;
    rect = Rect.fromLTRB(rect.left, rect.top, right, rect.bottom);

    rr = RRect.fromRectAndRadius(rect, const Radius.circular(5));

    paint
      ..style = PaintingStyle.fill;
    canvas.drawRRect(rr, paint);
  }

  @override
  bool shouldRepaint(BatteryPainter oldDelegate) => oldDelegate.level != level;
}

class Battery extends StatefulWidget {
  @override
  _BatteryWidgetState createState() => _BatteryWidgetState();
}

class _BatteryWidgetState extends State<Battery> {
  Widget build (BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      return CustomPaint(
        painter:BatteryPainter(),
        size:Size(constraints.maxWidth, 50)
      );
    });
  }
}

但现在如果我创建其中之一：

Widget build(BuildContext context) {
  return Container(
    child: Column(children: [
      ...,
      Battery()
    ]
  );
}

如何将更新传递给电池状态，以便重新绘制组件？如果我保留对Battery 对象的引用，那对我没有好处，因为它是保持当前电池电量的状态，而不是小部件，因此没有明显的方法可以更改电量值。如果我将一个级别传递给Battery() 构造函数并在createState 中使用该值，这也无济于事，因为 Dart 是按值传递的，因此更改知道更改的顶级组件中的值到这个值不要改变电池电量显示组件中的值。

细粒度组件如何连接到这样的模型？

【问题讨论】：

标签： flutter dart

【解决方案1】：

如何将更新传递给电池状态以便重绘组件？

没有简单的答案。您从众多state management methods 中选择一个并使用它。

【讨论】：