美文网首页Flutter:组件Flutter
Flutter问题记录:StatefulWidget嵌套使用界面

Flutter问题记录:StatefulWidget嵌套使用界面

作者: 程序狮 | 来源:发表于2020-05-12 11:07 被阅读0次

    StatefulWidget嵌套使用界面不刷新问题

    现象:B使用了AWidget,此时B有state变化,界面不刷新

    嵌套逻辑如下图


    嵌套图解.jpg

    A Widget是封装的TitleBar,content是外部传入
    B是使用A Widget,内容是B类中封装了一个方法来获取的Widget

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:my_flutter/utils/config.dart';
    
    class TitleBarWidget extends StatefulWidget {
      String title;
      Widget leftWidget, rightWidget;
      Widget contentWidget;
      bool isHasBack;
    
      TitleBarWidget({Key key,this.title,this.isHasBack, this.leftWidget, this.rightWidget, this.contentWidget} ): super(key: key);
      @override
      State<StatefulWidget> createState() {
        return _TitleBarWidgetState(this.contentWidget);
      }
    }
    
    class _TitleBarWidgetState extends State<TitleBarWidget> {
    
      Widget contentWidget;
    
      _TitleBarWidgetState(this.contentWidget);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: Stack(
              children: <Widget>[
                Container(
                  color: Colors.white,
                  padding: EdgeInsets.only(top: 44),
                  child: contentWidget,
                ),
                _getAppBarWidget()
              ],
            ),
          ),
        );
      }
    
      Widget _getAppBarWidget() {
        return Container(
          height: 44,
          padding: EdgeInsets.only(left: 15, right: 15),
          child: _getContentWidget(),
        );
      }
    
      Widget _getContentWidget() {
        return Stack(
          alignment: Alignment.centerLeft,
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              child: Text(widget.title ?? '',
                  style: TextStyle(fontSize: 17, color: Color(Config.COLOR_1A1A1A), fontWeight: FontWeight.bold)),
            ),
            widget.leftWidget == null ? Container(
              child: _getBackWidget(),
            ):
            Row(
              children: <Widget>[
                _getBackWidget(),
                widget.leftWidget
              ],
            ),
            Container(
              alignment: Alignment.centerRight,
              child: widget.rightWidget ?? Text(''),
            )
          ],
        );
      }
    
      Widget _getBackWidget() {
        return Container(
          height: 49,
          padding: EdgeInsets.all(3),
          child: GestureDetector(
            child: Image.asset(Config.IMG_PATH_COMMON + 'icon_back.png', width: 18, height: 16,),
            onTap: () {
              Navigator.of(context).pop();
            },
          ),
        );
      }
    
    }
    

    B类

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:my_flutter/comment_widget/title_bar_widget.dart';
    
    class TestStateFulPage extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return _TestPageState();
      }
    }
    
    class _TestPageState extends State<TestStateFulPage> {
    
      int numbner = 1;
    
      @override
      Widget build(BuildContext context) {
        print('TestPage build()');
        return TitleBarWidget(
          title: '我是B类',
          contentWidget: _getContentWidet(),
        );
      }
    
      Widget _getContentWidet() {
        return Column(
          children: <Widget>[
            Text('当前$numbner'),
            FlatButton(
              child: Text('+'),
              onPressed: () {
                setState(() {
                  numbner ++;
                });
              },
            )
          ],
        );
      }
    
    }
    

    解决办法:A中不向state类传入参数,state类中使用widget.contentWiget方式使用参数

    解决办法.jpg

    相关文章

      网友评论

        本文标题:Flutter问题记录:StatefulWidget嵌套使用界面

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