Flutter之InheritedWidget

Posted on 2023年9月11日2023年9月11日 by hackdl

资料

Flutter知识点: InheritedWidget

例子

import 'package:flutter/material.dart';

class InheritedTestModel {
  final int count;

  const InheritedTestModel(this.count);
}

class InheritedContext extends InheritedWidget {
  // 数据
  final InheritedTestModel inheritedTestModel;

  // 点击+号的方法
  final Function() increment;

  // 点击-号的方法
  final Function() reduce;

  InheritedContext({
    Key? key,
    required this.inheritedTestModel,
    required this.increment,
    required this.reduce,
    required Widget child,
  }) : super(key: key, child: child);

  static InheritedContext? of(BuildContext context, {bool rebuild = true}) {
    // if (rebuild) {
    return context.dependOnInheritedWidgetOfExactType();
    // } else {
    //   return context.getElementForInheritedWidgetOfExactType();
    // }
  }

  @override
  bool updateShouldNotify(covariant InheritedContext oldWidget) {
    return inheritedTestModel != oldWidget.inheritedTestModel;
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Welcome to Flutter",
      home: Scaffold(
        appBar: AppBar(title: Text('Hello')),
        body: InheritedWidgetTestContainer(),
      ),
    );
  }
}

class TestWidgetA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final inheritedContext = InheritedContext.of(context);
    final inheritedTestModel = inheritedContext?.inheritedTestModel;
    print('TestWidgetA 中的count的值：${inheritedTestModel?.count}');
    return Padding(
      padding: EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
      child: RaisedButton(
        onPressed: inheritedContext?.increment,
        textColor: Colors.black,
        child: new Text('+'),
      ),
    );
  }
}

class TestWidgetB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final inheritedContext = InheritedContext.of(context);
    final inheritedTestModel = inheritedContext?.inheritedTestModel;
    print('TestWidgetB 中count的值:${inheritedTestModel?.count}');
    return Padding(
      padding: EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
      child: Text(
        '当前count:${inheritedTestModel?.count}',
        style: TextStyle(fontSize: 20.0),
      ),
    );
  }
}

class TestWidgetC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final inheritedContext = InheritedContext.of(context);
    final inheritedTestModel = inheritedContext?.inheritedTestModel;
    print('TestWidgetC 中count的值：${inheritedTestModel?.count}');
    return Padding(
      padding: EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
      child: RaisedButton(
        textColor: Colors.black,
        child: Text('-'),
        onPressed: inheritedContext?.reduce,
      ),
    );
  }
}

class InheritedWidgetTestContainer extends StatefulWidget {
  @override
  State createState() => _InheritedWidgetTestContainerState();
}

class _InheritedWidgetTestContainerState
    extends State {
  late InheritedTestModel inheritedTestModel;

  @override
  void initState() {
    inheritedTestModel = InheritedTestModel(0);
    super.initState();
  }

  _incrementCount() {
    setState(() {
      inheritedTestModel = InheritedTestModel(inheritedTestModel.count + 1);
    });
  }

  _reduceCount() {
    setState(() {
      inheritedTestModel = InheritedTestModel(inheritedTestModel.count - 1);
    });
  }

  @override
  Widget build(BuildContext context) {
    return InheritedContext(
      inheritedTestModel: inheritedTestModel,
      increment: _incrementCount,
      reduce: _reduceCount,
      child: Scaffold(
        appBar: AppBar(title: Text('InheritedWidgetTest')),
        body: Column(
          children: [
            Padding(
              padding: EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
              child: Text(
                '我们常使用的nTheme.of(context).textThemenMediaQuery.of'
                '(context).size等n就是通过InheritedWidget实现的',
                style: TextStyle(fontSize: 20.0),
              ),
            ),
            TestWidgetA(),
            TestWidgetB(),
            TestWidgetC(),
          ],
        ),
      ),
    );
  }
}

1. 先创建一个继承InheritedWidget的子类InheritedContext

class InheritedContext extends InheritedWidget {
  // 数据
  final InheritedTestModel inheritedTestModel;
  // 点击+号的方法
  final Function() increment;
  // 点击-号的方法
  final Function() reduce;
  InheritedContext({
    Key? key,
    required this.inheritedTestModel,
    required this.increment,
    required this.reduce,
    required Widget child,
  }) : super(key: key, child: child);
  static InheritedContext? of(BuildContext context, {bool rebuild = true}) {
    // if (rebuild) {
    return context.dependOnInheritedWidgetOfExactType();
    // } else {
    //   return context.getElementForInheritedWidgetOfExactType();
    // }
  }
  @override
  bool updateShouldNotify(covariant InheritedContext oldWidget) {
    return inheritedTestModel != oldWidget.inheritedTestModel;
  }
}

这个类作为你要parent widget存在。

通过以下来创建以来

static InheritedContext? of(BuildContext context, {bool rebuild = true}) {
    // if (rebuild) {
    return context.dependOnInheritedWidgetOfExactType();
    // } else {
    //   return context.getElementForInheritedWidgetOfExactType();
    // }
  }

设置监听(TestWIdgetA、TestWidgetB、TestWidgetC)

final inheritedContext = InheritedContext.of(context);
final inheritedTestModel = inheritedContext?.inheritedTestModel;

从widget树中遍历，得到有效的数据。

实例2

import 'package:flutter/material.dart';

class InheritedTestModel {
  final int count;

  const InheritedTestModel(this.count);
}

class InheritedContext extends InheritedWidget {
  // 数据
  final InheritedTestModel inheritedTestModel;

  // 点击+号的方法
  final Function() increment;

  // 点击-号的方法
  final Function() reduce;

  InheritedContext({
    Key? key,
    required this.inheritedTestModel,
    required this.increment,
    required this.reduce,
    required Widget child,
  }) : super(key: key, child: child);

  static InheritedContext? of(BuildContext context, {bool rebuild = true}) {
    if (rebuild) {
      return context.dependOnInheritedWidgetOfExactType();
    } else {
      final w = context
          .getElementForInheritedWidgetOfExactType()
          ?.widget;
      if (w is InheritedContext) {
        return w;
      } else {
        return context.dependOnInheritedWidgetOfExactType();
      }
    }
  }

  @override
  bool updateShouldNotify(covariant InheritedContext oldWidget) {
    return inheritedTestModel != oldWidget.inheritedTestModel;
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Welcome to Flutter",
      home: Scaffold(
        appBar: AppBar(title: Text('Hello')),
        body: InheritedWidgetTestContainer(),
      ),
    );
  }
}

class TestWidgetA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 去InheritedContext里面取值,重新构建的时候
    final inheritedContext = InheritedContext.of(context);
    final inheritedTestModel = inheritedContext?.inheritedTestModel;
    print('TestWidgetA 中的count的值：${inheritedTestModel?.count}');
    return Padding(
      padding: EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
      child: RaisedButton(
        onPressed: inheritedContext?.increment,
        textColor: Colors.black,
        child: new Text('+'),
      ),
    );
  }
}

class TestWidgetB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final inheritedContext = InheritedContext.of(context);
    final inheritedTestModel = inheritedContext?.inheritedTestModel;
    print('TestWidgetB 中count的值:${inheritedTestModel?.count}');
    return Padding(
      padding: EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
      child: Text(
        '当前count:${inheritedTestModel?.count}',
        style: TextStyle(fontSize: 20.0),
      ),
    );
  }
}

class TestWidgetC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final inheritedContext = InheritedContext.of(context);
    final inheritedTestModel = inheritedContext?.inheritedTestModel;
    print('TestWidgetC 中count的值：${inheritedTestModel?.count}');
    return Padding(
      padding: EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
      child: RaisedButton(
        textColor: Colors.black,
        child: Text('-'),
        onPressed: inheritedContext?.reduce,
      ),
    );
  }
}

class InheritedWidgetTestContainer extends StatefulWidget {
  @override
  State createState() => _InheritedWidgetTestContainerState();
}

class _InheritedWidgetTestContainerState
    extends State {
  late InheritedTestModel inheritedTestModel;

  @override
  void initState() {
    inheritedTestModel = InheritedTestModel(0);
    super.initState();
  }

  _incrementCount() {
    setState(() {
      inheritedTestModel = InheritedTestModel(inheritedTestModel.count + 1);
    });
  }

  _reduceCount() {
    setState(() {
      inheritedTestModel = InheritedTestModel(inheritedTestModel.count - 1);
    });
  }

  @override
  Widget build(BuildContext context) {
    print('_InheritedWidgetTestContainerState build(BuildContext...');
    return InheritedContext(
      inheritedTestModel: inheritedTestModel,
      increment: _incrementCount,
      reduce: _reduceCount,
      child: Scaffold(
        appBar: AppBar(title: Text('InheritedWidgetTest')),
        body: Column(
          children: [
            Padding(
              padding: EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0),
              child: Text(
                '我们常使用的nTheme.of(context).textThemenMediaQuery.of'
                '(context).size等n就是通过InheritedWidget实现的',
                style: TextStyle(fontSize: 20.0),
              ),
            ),
            TestWidgetA(),
            TestWidgetB(),
            TestWidgetC(),
          ],
        ),
      ),
    );
  }
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 分布式搜索引擎Elasticsearch基础入门学习

一、Elasticsearch介绍 Elasticsearch介绍 Elasticsearh 是 elastic.co 公司开发的分布式搜索引擎。 Elasticsearch（简称ES）是一个开源的分布式、高度可扩展的全文搜索和分析引擎。它能够快速、近乎实时的…

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇: 最新React技术栈，实战复杂低代码项目-仿问卷星完结-江山也要伟人扶
下一篇: 模仿京东-上下左右滑动冲突