美文网首页程序员
新贵 Flutter InheritedWidget（9）上

新贵 Flutter InheritedWidget（9）上

作者: zidea | 来源:发表于2019-06-27 20:16 被阅读15次

    在多层级的 StatefulWidget 进行传递数据是比较麻烦的事情，不过今天介绍的
    无论是前端还是 Android 开发，在组件化的今天我们都需要给出一个套数据在组件间传递的方案。
    不过声明一下今天分享的数据传递方式并不是最理想数据传递方式随后还会介绍其他。不过随着业务不多复杂我们传递数据


    图 屏幕快照 2019-06-26 上午5.47.19.png 
    import 'package:flutter/material.dart';
import 'pages/home_screen.dart';

void main() {
  runApp(
    new HomeApp(),
  );
}

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(title: 'Demo', home: new HomeScreen());
  }
}

    上面的代码在普通不过，然后创建 HomeApp 页面来启动 HomeScreen 页面。下面是 HomeScreen 的主页面。HomeScreen 是一个 StatefulWidget 组件。

    import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreenState();
  }
}
class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Inherited Widget Demo"),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            
          ],
        ),
      ),
    );
  }
}

    随着介绍 InheritedWidget 同时也给大家解释一些常用组件 Container 是容器组件，如果想让组件按列排列就可以用 Colum。mainAxisAlignment 表示按横向而 crossAxisAlignment 表示纵向上组件对齐的方式，他们会根据 Row 和 Colum 排列方式不同而不同​。​

    children: <Widget>[
            Text("Name: "),
            SizedBox(
              height: 20.0,
            ),
            RaisedButton(
              child: Text("Add Name"),
              onPressed: (){
              },
            )
          ],
    图 
      openForm(BuildContext context) {
    //Open form
  }

    点击按钮后调用 openForm 来打开一个表单页。继续创建一个 FormScreen 页面，这个页面相对复杂，需要花时间说明一下​。​

    import 'package:flutter/material.dart';

class FormScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FormScreenState();
  }
}

class _FormScreenState extends State<FormScreen> {
  String name;
  final formKey = new GlobalKey<FormState>();
  validateAndSave() {
    if (formKey.currentState.validate()) {
      formKey.currentState.save();
      Navigator.pop(context);
    } else {
      print("validation Enter");
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Inherited Widget Demo"),
      ),
      body: Container(
          alignment: Alignment.center,
          child: Form(
            key: formKey,
            child: Padding(
              padding: EdgeInsets.all(20.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  TextFormField(
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(labelText: "name"),
                    validator: (val) => val.length == 0 ? "Enter Name" : null,
                    onSaved: (val) => name = val,
                  ),
                  RaisedButton(
                    child: Text("save"),
                    onPressed: validateAndSave,
                  )
                ],
              ),
            ),
          )),
    );
  }
}

    创建一个表单给 FormKey，给 key 是便于 element 可以通过 key 找到表单而不是仅仅根据类型来找到 element 对应 widge，这个随后给大家介绍。
    TextFormField 作为一个相对复杂常用表单组件通过 keyboardType 定义他的类型，validator 可以写其校验函数，也就是我们定义校验的规则，noSave 也就是当提交表单时候的函数​。
    formKey.currentState.validate() 来判断是否校验通过，校验通过后会返回到 Screen 页面​

    class User {
  String name;
  User({this.name});
}

    我们定义一个 User 类，作为数据模型。

    import 'package:flutter/material.dart';
import '../model/user.dart';

class StateContainer extends StatefulWidget {
  final Widget child;
  final User user;

  StateContainer(@required this.child, this.user);

  static _StateContainerState of(BuildContext context) {
    return (context.inheritFromWidgetOfExactType(InheritedStateContainer)
            as InheritedStateContainer)
        .data;
  }

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _StateContainerState();
  }
}

class _StateContainerState extends State<StateContainer> {
  User user;

  void updateUser({name}) {
    if (user == null) {
      user = User(name: name);
      setState(() {
        user = user;
      });
    } else {
      setState(() {
        user.name = name ?? user.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return InheritedStateContainer(
      data: this,
      child: widget.child,
    );
  }
}

class InheritedStateContainer extends InheritedWidget {
  final _StateContainerState data;
  InheritedStateContainer({
    Key key,
    @required this.data,
    @required Widget child,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) {
    // TODO: implement updateShouldNotify
    return true;
  }
}


    import 'package:flutter/material.dart';
import 'pages/home_screen.dart';
import 'pages/state_container.dart';

void main() {
  runApp(StateContainer(HomeApp(), null));
}

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(title: 'Demo', home: HomeScreen());
  }
}


    import 'package:flutter/material.dart';
import '../model/user.dart';
import 'state_container.dart';

class FormScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FormScreenState();
  }
}

class _FormScreenState extends State<FormScreen> {
  String name;
  final formKey = new GlobalKey<FormState>();
  validateAndSave() {
    final container = StateContainer.of(context);

    if (formKey.currentState.validate()) {
      formKey.currentState.save();
      container.updateUser(name: name);
      Navigator.pop(context);
    } else {
      print("validation Enter");
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Inherited Widget Demo"),
      ),
      body: Container(
          alignment: Alignment.center,
          child: Form(
            key: formKey,
            child: Padding(
              padding: EdgeInsets.all(20.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  TextFormField(
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(labelText: "name"),
                    validator: (val) => val.length == 0 ? "Enter Name" : null,
                    onSaved: (val) => name = val,
                  ),
                  RaisedButton(
                    child: Text("save"),
                    onPressed: validateAndSave,
                  )
                ],
              ),
            ),
          )),
    );
  }
}


    import 'package:flutter/material.dart';
import 'my_form.dart';
import '../model/user.dart';
import 'state_container.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreenState();
  }
}

class _HomeScreenState extends State<HomeScreen> {
  User user;
  openForm(BuildContext context) {
    //Open form
    Navigator.push(
        context,
        MaterialPageRoute(
            fullscreenDialog: true,
            builder: (context) {
              return FormScreen();
            }));
  }

  @override
  Widget build(BuildContext context) {
    final container = StateContainer.of(context);
    user = container.user;
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Inherited Widget Demo"),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            user != null ? Text("Name: ${user.name}") : Text("No name"),
            SizedBox(
              height: 20.0,
            ),
            RaisedButton(
              child: Text("Add Name"),
              onPressed: () {
                openForm(context);
              },
            )
          ],
        ),
      ),
    );
  }
}

    相关文章

      网友评论

        本文标题：新贵 Flutter InheritedWidget（9）上

        本文链接：https://www.haomeiwen.com/subject/vatqcctx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        程序员

        关于我们|服务条款|联系我们|新贵 Flutter InheritedWidget（9）上|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！