在 State 类之外更改小部件的状态

Question

我是 Flutter 开发的初学者，但遇到了一些问题。我会尽力向我解释。

我有一个滑块（自定义小部件有状态）。我想将此小部件集成到我的主视图中，但我必须更改滑块的值（此值也可以通过点击手势检测器更改）。

我在网上研究后尝试了几件事。
例如，使用 VerticalSliderState 的 getter 并访问 VerticalSliderState 方法来更改值。
这仅在我收到 the state is null 错误后才起作用，我想我错过了 setState() 的颤振概念。
有什么解释吗？谢谢：P

这是我的代码：

有状态的自定义小部件：

import 'package:flutter/material.dart';

class VerticalSlider extends StatefulWidget {
  ....
  final double value;
  .....
  final void Function(double) onValueChanged;

   VerticalSlider({
    Key key,
    @required this.height,
    @required this.width,
    this.onValueChanged,
    this.value,
    ....
  }) : super(key: key);


  VerticalSliderState state;

  @override
  VerticalSliderState createState(){
    state = new VerticalSliderState();
    return state ;
  }
}

class VerticalSliderState extends State<Vertical Slider>{
  .....
double _value;

  double _currentHeight;
  Widget _movingDecoratedBox;
  Widget _fixedDecoratedBox;

  void setValue(double value){
    _setValue(value, false, widget.height);
  }

  initState() {
    super.initState();
    _value = widget.value ?? 5.0;
    _currentHeight = _convertValueToHeight();
    _movingDecoratedBox = widget.movingBox ?? DecoratedBox(
        decoration: BoxDecoration(color: Colors.red)
    );
    _fixedDecoratedBox = widget.fixedBox ?? DecoratedBox(
      decoration: BoxDecoration(color: Colors.grey),
    );
  }

  .......... 

  void _onTapUp(TapUpDetails tapDetails) {
    RenderBox renderBox = context.findRenderObject();
    var newHeight = widget.height - renderBox.globalToLocal(tapDetails.globalPosition).dy;
    var newValue = _convertHeightToValue(newHeight);
    setState(() {
      _currentHeight = (widget.height/10.5) * (newValue);
      _setValue(newValue, true, widget.height);

    });

  }

  void _setValue(double newValue, bool userRequest, double height) {
    _value = newValue;
    if(userRequest){
      widget.onValueChanged(_value);
    }
    else{
      setState(() {
        _currentHeight = (height/10.5) * (newValue);
      });
    }
  }

Widget _buildMovingBox() {
    return Align(
      alignment: Alignment.bottomCenter,
      child: SizedBox(
        width: widget.width,
        height: _currentHeight,
        child: _movingDecoratedBox,
      ),
    );
  }
  .......... 

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapUp: _onTapUp,
      child: Stack(
        alignment: AlignmentDirectional.bottomCenter,
        children: <Widget>[
          _buildFixedBox(),
          _buildMovingBox(),
        ],
      ),
    );
  }

我的主要观点：

seekBar1 = new VerticalSlider(
      height: mediaQueryData.size.height /  2.7,
      width: 40.0,
      max: 11.0,
      min: 0.0,
      value: 5.5,
      movingBox: new Container(color: Colors.teal),
      fixedBox: new Container(color: Colors.grey[200]),
      onValueChanged: onValueChanged1,
    );

void onValueChanged1(double newValue) {
      seekBar2.state.setValue(10-newValue);
      print(newValue);
  }

Answer 1

一个解决方案将是下面完整示例中的一个。滑块小部件更新主页中的值，并用于设置另一个滑块中的值。

由于你的sn-p不完整，我已经编写了一些代码。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _value = 9;

  void onValueChanged(double newValue) {
    setState(() {
      _value = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Test"),
      ),
      body: new Center(
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            VerticalSlider(
              height: MediaQuery.of(context).size.height / 2.7,
              width: 40.0,
              max: 11.0,
              min: 0.0,
              value: _value,
              movingBox: new Container(color: Colors.teal),
              fixedBox: new Container(color: Colors.grey[200]),
              onValueChanged: onValueChanged,
            ),
            SizedBox(
              width: 50.0,
            ),
            VerticalSlider(
              height: MediaQuery.of(context).size.height / 2.7,
              width: 40.0,
              max: 11.0,
              min: 0.0,
              value: _value,
              movingBox: new Container(color: Colors.teal),
              fixedBox: new Container(color: Colors.grey[200]),
              onValueChanged: onValueChanged,
            ),
          ],
        ),
      ),
    );
  }
}

class VerticalSlider extends StatefulWidget {
  final double height;
  final double width;
  final double max;
  final double min;
  final double value;
  final Widget movingBox;
  final Widget fixedBox;
  final void Function(double) onValueChanged;

  VerticalSlider({
    Key key,
    @required this.height,
    @required this.width,
    this.onValueChanged,
    this.value,
    this.max,
    this.min,
    this.movingBox,
    this.fixedBox,
  }) : super(key: key);

  @override
  VerticalSliderState createState() {
    return VerticalSliderState();
  }
}

class VerticalSliderState extends State<VerticalSlider> {
  double _value;
  double _currentHeight;

  @override
  void didUpdateWidget(VerticalSlider oldWidget) {
    super.didUpdateWidget(oldWidget);
    _init();
  }

  initState() {
    super.initState();
    _init();
  }

  void _init() {
    _value = widget.value ?? widget.max / 2;
    _currentHeight = _convertValueToHeight();
  }

  double _convertValueToHeight() {
    return _value * widget.height / widget.max;
  }

  double _convertHeightToValue(double height) {
    return height * widget.max / widget.height;
  }

  void _onTapUp(TapUpDetails tapDetails) {
    RenderBox renderBox = context.findRenderObject();
    var newHeight =
        widget.height - renderBox.globalToLocal(tapDetails.globalPosition).dy;
    var newValue = _convertHeightToValue(newHeight);
    widget.onValueChanged(newValue);
    setState(() {
      _currentHeight = newHeight;
    });
  }

  Widget _buildMovingBox() {
    return Align(
      alignment: Alignment.bottomCenter,
      child: SizedBox(
        width: widget.width,
        height: _currentHeight,
        child: widget.movingBox ??
            DecoratedBox(decoration: BoxDecoration(color: Colors.red)),
      ),
    );
  }

  Widget _buildFixedBox() {
    return Align(
      alignment: Alignment.bottomCenter,
      child: SizedBox(
        width: widget.width / 2,
        height: double.infinity,
        child: widget.fixedBox ??
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.grey),
            ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapUp: _onTapUp,
      child: SizedBox(
        width: widget.width,
        height: widget.height,
        child: Stack(
          alignment: AlignmentDirectional.bottomCenter,
          children: <Widget>[
            _buildFixedBox(),
            _buildMovingBox(),
          ],
        ),
      ),
    );
  }
}

Answer 2

请记住以下几点：

• 你不想在你的Stateful Widget 中有一个state 变量， 您也不想通过myWidget.state 访问它。让 小部件本身处理自己的状态。

• 你得到null，因为当你在你的 VerticalSliderState 对象，它将重建你的树，因此， 生成一个新的更新VerticalSliderState。这意味着你的 状态引用现在将为空。

• 如果你想访问你所在州的一些数据，你可以采取 最终回调的优势（比如你的onValueChanged）或者你 可以使用Streams。

• 另外，使用方法返回Widgets 而不是变量，这样更正确。

• 例如，如果您有 seekBar2.state.setValue(10-newValue);，您只想创建一个具有更新值的新 seekBar2 = VerticalSlider(updated properties)，而不是这样做。