0

我正在尝试使用 InheritedWidget 方法在 Widget 树下共享状态。为此,我正在制作一个简单的计数器应用程序。您可以随意加、减、乘或除计数器。

这是一个小型演示,因此未遵循最佳实践。代码行context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>()似乎是null出于某种原因。查看示例和文档时,它应该在小部件树中找到 MyInheritedWidget 并将其返回。但是,我收到来自颤振工具的投诉,称它为空。而且,实际上它也是null如此。

这里返回失败的原因是什么?而且,我需要怎么做才能收到实例?

文件:main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Counter(),
    );
  }
}

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

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

class CounterState extends State<Counter> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
        centerTitle: true,
      ),
      body: MyInheritedWidget(
        counterState: this,
        child: Builder(
          builder: (BuildContext innerContext) {
            return CounterViewer(
                counterState: MyInheritedWidget.of(context).counterState);
          },
        ),
      ),
    );
  }

  void addCounter(int value) {
    setState(() {
      counter++;
    });
  }

  void subtractCounter(int value) {
    setState(() {
      counter--;
    });
  }

  void multiplyCounter(int value) {
    setState(() {
      counter *= value;
    });
  }

  void divideCounter(int value) {
    setState(() {
      counter = (counter / value).toInt();
    });
  }
}

class MyInheritedWidget extends InheritedWidget {
  final CounterState counterState;

  const MyInheritedWidget(
      {Key? key, required Widget child, required this.counterState})
      : super(key: key, child: child);

  static MyInheritedWidget of(BuildContext context) {
    final MyInheritedWidget? widget =
        context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();

    assert(widget != null);
    return widget!;
  }

  @override
  bool updateShouldNotify(covariant InheritedWidget oldWidget) {
    return true;
  }
}

class CounterViewer extends StatelessWidget {
  final CounterState counterState;

  const CounterViewer({Key? key, required this.counterState}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          color: Colors.green.shade200,
          width: MediaQuery.of(context).size.width,
          height: 180,
          child: Center(
            child: Text(
              '220',
              style: TextStyle(
                color: Colors.grey.shade50,
                fontSize: 60,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        Container(
          color: Colors.grey.shade300,
          padding: EdgeInsets.symmetric(vertical: 16),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () {},
                child: Text('Add'),
              ),
              ElevatedButton(
                onPressed: () {},
                child: Text('Subtract'),
              ),
              ElevatedButton(
                onPressed: () {},
                child: Text('Multiply'),
              ),
              ElevatedButton(
                onPressed: () {},
                child: Text('Divide'),
              ),
            ],
          ),
        )
      ],
    );
  }
}

更新:我似乎已将错误的上下文传递给该dependOnInheritedWidgetOfExactType()方法。从更改contextinnerContext解决问题。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
        centerTitle: true,
      ),
      body: MyInheritedWidget(
        counterState: this,
        child: Builder(
          builder: (BuildContext innerContext) {
            return CounterViewer(
                counterState: MyInheritedWidget.of(innerContext).counterState);
          },
        ),
      ),
    );
  }
4

0 回答 0