在Flutter中替换小部件（如片段） [英] Replace widgets like fragments in Flutter

问题描述

我是Flutter的新手。

我有一个带有2个子窗口小部件的应用程序（Android中为2个片段），当我单击WidgetA中的next按钮时，我想要将小部件替换（或推送）到WidgetChildA中，例如Android中的推送（或替换）片段。但是，取而代之的是，我在Flutter中得到了一个类似于普通屏幕的全屏小部件。

这是我的代码：

  import'package：flutter / material.dart'; 
 
类DemoFragment扩展了StatefulWidget {
 @override 
 State< StatefulWidget> createState（）{
返回新的DemoFragmentState（）; 
} 
} 
 
类DemoFragmentState扩展State< DemoFragment> {
 @override 
 Widget build（BuildContext context）{
 print（context.toString（）+ context.hashCode.toString（））; 
返回新的Scaffold（
 appBar：new AppBar（title：new Text（ Demofragment）），
正文：new Column（
 crossAxisAlignment：CrossAxisAlignment.stretch，
 mainAxisAlignment：MainAxisAlignment.space ]，
），
）; 
} 
} 
 
类FragmentA扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 print（context.toString（ ）+ context.hashCode.toString（））; 
 return new Center（
子项：new Column（
子项：< Widget> [
 new Text（ Fragment A），
 new RaisedButton（
子项：new Text（ next），
 onPressed：（）{
 print（context.toString（）+ context.hashCode.toString（））; 
 Navigator.of（ context）.push（new PageRouteBuilder（
 opaque：true，
 transitionDuration：const Duration（毫秒：0），
 pageBuilder：（BuildContext context，_，__）{
 return new FragmentChildA（）; 
}））; 
 
 / * showDialog（
 context：context，
 builder：（_）=> new AlertDialog（
标题：new Text（ Hello world），
内容：new Text（ this is my content），
））; * / 
 }）
]，
），
）； 
} 
} 
 
类FragmentB扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 print（context.toString（ ）+ context.hashCode.toString（））; 
 return new Center（
 child：new Column（
 children：< Widget> [
 new Text（ Fragment B），
 new RaisedButton（
子级：new Text（ next），
 onPressed：（）{
 print（context.toString（）+ context.hashCode.toString（））; 
 Navigator.of（ context）.push（new PageRouteBuilder（
 opaque：true，
 transitionDuration：const Duration（毫秒：0），
 pageBuilder：（BuildContext context，_，__）{
 return new FragmentChildB（）; 
}））; 
}）
]，
））; 
} 
} 
 
类FragmentChildA扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return new Scaffold（
正文：new Center（
子项：new Column（
 mainAxisAlignment：MainAxisAlignment.center，
子项：< Widget> [new Text（ Fragment Child A）），
）））; 
} 
} 
 
类FragmentChildB扩展StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return new Scaffold（
正文：new Center（
子项：new Column（
 mainAxisAlignment：MainAxisAlignment.center，
子项：< Widget> [new Text（ Fragment Child B）]]，
）））; 
} 
} 
  

屏幕截图：

解决方案

我花了几个月的时间找到解决这种情况的方法，但是我忘了回答这个问题。

解决方案是用新的导航器包装小部件。 / p>

您可以在此处

及其简单演示此处

该解决方案的缺点有时是键盘没有显示出我的意图。

I'm new to Flutter.

I have an app with 2 sub widgets (2 fragments in Android), and when i clicked next button in WidgetA, I want to replace (or push) that widget into WidgetChildA, like push (or replace) fragments in Android. But instead of that, I got a fullscreen widget like a normal screen in Flutter.

Here is my code:

import 'package:flutter/material.dart';

class DemoFragment extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new DemoFragmentState();
  }
}

class DemoFragmentState extends State<DemoFragment> {
  @override
  Widget build(BuildContext context) {
    print(context.toString() + context.hashCode.toString());
    return new Scaffold(
      appBar: new AppBar(title: new Text("Demo fragment")),
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          new FragmentA(),
          new FragmentB()
        ],
      ),
    );
  }
}

class FragmentA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print(context.toString() + context.hashCode.toString());
    return new Center(
      child: new Column(
        children: <Widget>[
          new Text("Fragment A"),
          new RaisedButton(
              child: new Text("next"),
              onPressed: () {
                print(context.toString() + context.hashCode.toString());
                Navigator.of(context).push(new PageRouteBuilder(
                    opaque: true,
                    transitionDuration: const Duration(milliseconds: 0),
                    pageBuilder: (BuildContext context, _, __) {
                      return new FragmentChildA();
                    }));

                /*showDialog(
                    context: context,
                    builder: (_) => new AlertDialog(
                          title: new Text("Hello world"),
                          content: new Text("this is my content"),
                        ));*/
              })
        ],
      ),
    );
  }
}

class FragmentB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print(context.toString() + context.hashCode.toString());
    return new Center(
        child: new Column(
      children: <Widget>[
        new Text("Fragment B"),
        new RaisedButton(
            child: new Text("next"),
            onPressed: () {
              print(context.toString() + context.hashCode.toString());
              Navigator.of(context).push(new PageRouteBuilder(
                  opaque: true,
                  transitionDuration: const Duration(milliseconds: 0),
                  pageBuilder: (BuildContext context, _, __) {
                    return new FragmentChildB();
                  }));
            })
      ],
    ));
  }
}

class FragmentChildA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(
            child: new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[new Text("Fragment Child A")],
    )));
  }
}

class FragmentChildB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(
            child: new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[new Text("Fragment Child B")],
    )));
  }
}

Screenshots:

Home page

After clicked

解决方案

Well, I found out the way to handle this case for a few months, but I just forgot to answer this question.

The solution is wrapping your Widget with a new Navigator.

You can see the video example here

And the simple demo for it here

The downside of this solution is sometimes, the keyboard is not showing as my intention.

这篇关于在Flutter中替换小部件（如片段）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！