如何在按下时创建页面

问题描述 投票：4回答：4

我有个问题。每次按下某个按钮时，我都无法弄清楚如何添加页面。

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

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);
      },
    );
  }
}
dart flutter
4个回答
1
投票

下面将创建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);
      },
    );
  }
}
0
投票

您可以在阵列中存储要打开的所有页面，然后在itembuilder中，使用索引打开页面。

0
投票

你已经拥有了自己想要的东西。每次创建页面时都会打开一个不同的实例。您可以通过修改代码来检查：

class Page extends StatelessWidget {

  final String open;
  int rand = Random().nextInt(100);

  Page({this.open});

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

你已经做得很好，只需稍加修改即可尝试。

import 'package:flutter/material.dart';

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            SizedBox(height: 70.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: NotificationListener<OverscrollIndicatorNotification>(
        onNotification: (OverscrollIndicatorNotification overscroll) {
          print("CoolTag: onNotification");
          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: i,)));
                  _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: 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, count: _count,)));
        },
        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: Center(child: Text("Page ${_count}")),
          ),
        ),
      ),
    );
  }
}

class Page extends StatelessWidget {
  final String open;
  final int count;

  Page({this.open, this.count});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Hero(
        tag: open,
        child: Material(child: Center(child: Text('New page ${count}'))),
      ),
      onTap: () => Navigator.pop(context),
    );
  }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.