【问题标题】:Flutter - Routing between different ViewsFlutter - 不同视图之间的路由
【发布时间】:2017-04-28 14:57:28
【问题描述】:

所以,我有这个文件:

import 'package:flutter/material.dart';
import "calculateDerivations.dart";
import "calculateRoots.dart";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Ableitungen berechnen'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: new AppBar(title: new Text(config.title)),
      body: new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          new InputWidget(),
        ]
      ),
    );
  }
}

class InputWidget extends StatefulWidget {
  @override
  InputWidgetState createState() => new InputWidgetState();
}

class InputWidgetState extends State<InputWidget> {

  InputValue val = new InputValue(text: "");
  String ersteAbleitung = "";
  String zweiteAbleitung = "";
  String dritteAbleitung = "";
  String roots = "";
  String function = "";

  void _submitted(){
    setState((){
      /*
       * Redirect here
       */
    });
  }

  @override
  Widget build(BuildContext context) {

    return new Column(
        children: [
          new Input(
            value: val,
            labelText: 'Funktion hier eingeben',
            onChanged: (InputValue newInputValue) {
              setState(() {
                val = newInputValue;
              });
          }),
          new IconButton(
            icon: new Icon(Icons.check),
            onPressed: _submitted,
          )
        ]
    );
  }
}

一旦用户现在单击 IconButton(调用 _submitted),我希望他被重定向到新的视图(小部件)。在 Flutter 中如何解决这个路由问题?

提前致谢

【问题讨论】:

    标签: view routing dart flutter


    【解决方案1】:

    正常的路线导航可能如下所示:

    new IconButton(
        icon: new Icon(Icons.check),
        onPressed: () {
            Navigator.push(context, new MaterialPageRoute(
                builder: (_) => new MyCustomView(),
            );
        )
    )
    

    您还可以通过将WidgetBuilders 的映射作为routes 构造函数参数传递给MaterialApp 或传递onGenerateRoute 处理程序来使用命名路由。 Flutter 库中有一个 example 的命名路由。

    如果您不希望有动画,请参阅我对this question 的回复。

    【讨论】:

    • 谢谢,我们会尽快试用!
    • 完美运行。有没有办法改变动画的持续时间和方向?
    • 是的。按照我在this question 中给出的示例。您可以使用以下代码自定义持续时间:@override Duration get transitionDuration => const Duration(milliseconds: 100);
    • 在您希望它从底部滑入的常见情况下,使用 MaterialPageRoute 的“fullscreenDialog: true”参数。要从其他方向滑动,请使用带有 SlideTransition 的自定义 MaterialPageRoute。请参阅MaterialPageRoute 获取灵感。
    • 感谢您的回答!一切都按照我的意愿工作:)
    猜你喜欢
    • 2021-04-01
    • 2023-03-10
    • 1970-01-01
    • 2021-05-21
    • 1970-01-01
    • 2013-04-21
    • 1970-01-01
    • 1970-01-01
    • 2018-05-16
    相关资源
    最近更新 更多