dart - 按下时如何创建页面-6ren

dart - 按下时如何创建页面

转载作者：IT老高更新时间：2023-10-28 12:41:50

我有问题。每次按下某个按钮时，我都不知道如何添加页面。

现在，我的意思是来自下面的代码(在阅读问题之前检查代码)当您按下添加按钮时，它将打开某个页面并添加一个新按钮。但是所有这些按钮都会打开同一个页面。如何让每个按钮打开不同的页面？

import 'package:flutter/material.dart';

void main() => runApp(MainPage());

class MainPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp ( 
      debugShowCheckedModeBanner: false,
      home:Scaffold (
        backgroundColor: Colors.white,
        body: Column (
          children: <Widget> [
            Container (
              height: 100.0
            ),
            Body(),
          ]
        )
      )
    );
  }

}

class Body extends StatefulWidget {

  @override
  _BodyState createState() => _BodyState();

}

class _BodyState extends State<Body> {

  final String open1 = 'open';

  int count = 1;

  @override
  Widget build(BuildContext context) {
    return Expanded (
      child: Container (
        child: NotificationListener<OverscrollIndicatorNotification> (
          onNotification: (OverscrollIndicatorNotification overscroll) {
            overscroll.disallowGlow();
          },
          child: PageView.builder(
            reverse: true,
            pageSnapping: false,
            controller: PageController(viewportFraction: 0.85),
            itemCount: count,
            itemBuilder: (context, i) {
              if (i == 0) {
                return GestureDetector (
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute (
                        builder: (context) => Page (
                          open: open1,
                        )
                      ),
                    );
                    count++;
                  },
                  child: Hero (
                    tag: open1,
                    child: Padding (
                      padding: EdgeInsets.only(
                        left: MediaQuery.of(context).size.height * 0.015,
                        right: MediaQuery.of(context).size.height * 0.015,
                        top: MediaQuery.of(context).size.width * 0.08,
                        bottom: MediaQuery.of(context).size.width * 0.15
                      ),
                      child: Material (
                        borderRadius: BorderRadius.circular(40.0),
                        color: Colors.white,
                        elevation: 8.0,
                        child: InkWell (
                          child: Column (
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget> [
                              Icon (
                                Icons.add,
                                size: 30.0,
                                color: Colors.black,
                              )
                            ]
                          ),
                        )                        
                      )
                    )
                  )
                );
              } 
              else {
                return RCard(i);
              }
            }
          )
        )
      )
    );
  }

}

class RCard extends StatefulWidget {

  final int count;

  RCard(this.count);

  @override
  RCardState createState() => RCardState();

}

class RCardState extends State<RCard> {

  int count;

  String open2;

  @override
  void initState() {

    super.initState();

    count = widget.count;

    open2 = 'open$count';

  }

  @override
  Widget build(BuildContext context) {
    return Hero (
      tag: open2,
      child: GestureDetector (
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute (
              builder: (context) => Page (
                open: open2,
              )
            ),
          );
        },
        child: Padding (
          padding: EdgeInsets.only(
            left: MediaQuery.of(context).size.height * 0.015,
            right: MediaQuery.of(context).size.height * 0.015,
            top: MediaQuery.of(context).size.width * 0.08,
            bottom: MediaQuery.of(context).size.width * 0.15
          ),
          child: Material (
            borderRadius: BorderRadius.circular(40.0),
            color: Colors.white,
            elevation: 8.0,
          )
        )
      ),
    );
  }

}

class Page extends StatelessWidget {

  final String open;

  Page({this.open});

  @override
  Widget build(BuildContext context) {
    return GestureDetector (
      child: Hero (
        tag: open,
        child: Material (
          child: Center(child: Text('New page')),
        )
      ),
      onTap: () {
        Navigator.pop(context);
      },
    );
  }
}

最佳答案

下面将创建 RCard 和 Page 实例并将它们存储在 List 中以供将来检索。

import 'package:flutter/material.dart';

void main() => runApp(MainPage());

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Column(
          children: <Widget>[
            Container(height: 100.0),
            Body(),
          ],
        ),
      ),
    );
  }
}

class Body extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  final List<RCard> _cards = [];
  PageController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PageController(viewportFraction: 0.85);
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        child: NotificationListener<OverscrollIndicatorNotification>(
          onNotification: (OverscrollIndicatorNotification overScroll) {
            overScroll.disallowGlow();
          },
          child: PageView.builder(
            pageSnapping: false,
            controller: _controller,
            itemCount: _cards.length + 1,
            itemBuilder: (context, index) {
              RCard card;
              final newIndex = index + 1;
              if (index < _cards.length) {
                card = _cards[index];
              } else {
                final tag = '$newIndex';
                final newPage = Page(
                  tag,
                );
                final newCard = RCard(
                  tag,
                  newPage,
                );
                card = RCard(
                  tag,
                  Page(
                    tag,
                    onTap: () {
                      _controller.jumpToPage(newIndex);
                    },
                  ),
                  onTap: () {
                    _cards.add(newCard);
                  },
                );
              }
              return card;
            },
          ),
        ),
      ),
    );
  }
}

class RCard extends StatelessWidget {
  final String tag;
  final Page page;
  final VoidCallback onTap;

  RCard(this.tag, this.page, {this.onTap});

  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: tag,
      child: GestureDetector(
        onTap: () {
          if (onTap != null) onTap();
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => page),
          );
        },
        child: Padding(
          padding: EdgeInsets.only(
              left: MediaQuery.of(context).size.height * 0.015,
              right: MediaQuery.of(context).size.height * 0.015,
              top: MediaQuery.of(context).size.width * 0.08,
              bottom: MediaQuery.of(context).size.width * 0.15),
          child: Material(
            borderRadius: BorderRadius.circular(40.0),
            color: Colors.white,
            elevation: 8.0,
            child: onTap == null
                ? Container()
                : Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.add,
                        size: 30.0,
                        color: Colors.black,
                      )
                    ],
                  ),
          ),
        ),
      ),
    );
  }
}

class Page extends StatelessWidget {
  final String tag;
  final VoidCallback onTap;

  Page(this.tag, {this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Hero(
        tag: tag,
        child: Material(
          child: Center(child: Text('New Page $tag')),
        ),
      ),
      onTap: () {
        if (onTap != null) onTap();
        Navigator.pop(context);
      },
    );
  }
}

关于dart - 按下时如何创建页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55260138/

文章推荐： bash - 在 bash 中捕获来自 "docker stop"的信号

文章推荐： shell - 重用继承图像的 CMD 或 ENTRYPOINT

rust - 创建 NaN 时如何 panic ？
我试图找到在庞大的代码库中创建 NaN 的位置。是否有一些编译器标志或我可以用来在 NaN 上 panic 的东西，这样我就可以找到它在哪一行？最佳答案没有编译器标志。你能做的最好的事情就是把你的
java - 当依赖类存在多个 bean 时如何 Autowiring ？
A类 class ClassA { @Autowired class ClassB; } 类配置: @Configuration class TestConfi
r - 使用 R 时如何 "think OOP"？
我是一名统计学研究生，经常使用 R。我熟悉其他编程环境中的 OOP。我什至在各种定义用于存储数据的新类的统计包中看到了它的使用。在我研究生生涯的这个阶段，我通常会为一些类作业编写一些算法——一些接收
python - 使用 cv2 时如何 'mirror' 实时网络摄像头视频？
我想要两个不同的网络摄像头视频输出，一个是普通的网络摄像头镜头，另一个是它的“镜像”版本。 cv2可以吗？ import time, cv2 video=cv2.VideoCapture(0) a=0
javascript - 使用搜索过滤器 Bootstrap 时如何 float div
我创建了一个可以通过两种方式过滤的图库。一个通过单击按钮，另一个通过搜索过滤器。过滤器工作完美，除了当 div 隐藏在过滤器上时，其余显示的 div 不会彼此相邻 float 。这是过滤前的样子:
git - 从服务器 pull 时如何 merge 和删除git中的冲突
我们作为一个 4 人团队工作，我们的项目部署在 openshift我们使用 git 存储库进行提交、推送和 pull 。当有人提交更多更改时，其他人必须 pull 它以在我们的系统中进行更新。但是从
jquery - 继承 jQuery Autocomplete 时如何 Hook 到所选项目
我正在尝试扩展自动完成功能，以便在选择某个项目时显示辅助标签。例如，给定显示项目的自动完成功能，项目名称将显示在包含代码的输入框旁边的 span 标记中。查看自动完成源代码，我发现过滤值的下拉列表是
ios - 使用 Core Data 时如何 NSPredicate 建立一对一关系？
我有一个包含歌曲、艺术家和专辑实体的核心数据。歌曲有可选的一对一关系艺术家到艺术家实体和专辑到专辑实体这两个实体都与 Song 实体具有反向关系。相册有可选的一对一关系艺术家到艺术家实体和可选的一
c# - XmlSerializer 在实现 IList 时如何/为什么以不同方式对待类？
XmlSerializer正在调用 IList.Add()在我的课上，我不明白为什么。我有一个自定义类(层次结构中的几个类之一)，其中包含我使用 XmlSerializer 与 XML 相互转换的数
javascript - 使用 IJavaScriptExecutor 时如何 Hook 自定义 javascript 触发器
我们在 Web 应用程序中定义了此事件，它创建了一个名为 timelineEventClicked 的自定义触发器 canvas.addEventListener('click', function
ios - Swift 最佳实践 - 使用 API 时如何/何时检查互联网连接和 404
有大量资源可用于使用 Swift(可达性)检查有效的 Internet 连接，以及在进行 API 调用时检查 httpResponse 的 statusCode 的方法，但是检查和处理这些的“正确”方
ruby-on-rails - 当我通过 Rspec 测试 Controller 时如何 stub 参数值
谁能告诉我是否可以在 Controller 规范中 stub params[] 值，以便 Controller 接受 stub 值作为 View 中的实际 params[] 值。例如，我的观点有一个
c# - : Bind to a UserControl's DependencyProperty, 当 UserControl 有一个 DataContext 时如何？
我的问题是没有在 UserControl 中连接 DependencyProperties。这不是问题。当我将 UserControl 中的按钮绑定(bind)到 UserControl 的 Depe
c++ - 使用 L 前缀(Visual C++ 编译器)时如何#define 硬编码字符串？
如何#define 路径 L"C:\Windows\System32\taskmgr.exe"来处理宽字符 #define TASK_MGR "C:\\Windows\\System32\\taskm
unit-testing - 使用RequireJS(和Jasmine/Sinon)时如何 stub 在另一个 View 渲染方法中实例化的主干 View
我正在尝试使用 Jasmine 和 Sion 编写单元测试，但是在使用 RequireJs 加载模块时我很难找到以下等效项: sinon.stub(window, "MyItemView"); 使用
css - 使用 col-*-pull 或 col-*-push 时如何 float div 元素？
我有一个包含三个 div 的示例页面，如下所示: 当浏览器大小达到 md 点并且第二个 div 高于第一个 div 时，第三个 div 开始在第一个的右侧
c# - 将 CString 从 C++ 编码(marshal)到 C# 时如何(如果需要)释放动态内存？
我在 C++ 端有 CString cs，在 C# 端有 IntPtr ip，它通过编码(marshal)处理机制包含 cs 的值。然后，我只需将需要的字符串作为 Marshal.PtrToStri

IT老高

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

dart - 按下时如何创建页面