Question

我目前正在尝试管理自己创建的颤振堆栈中的导航逻辑。 我想为列出的每个列表项添加单独的页面导航：

var ref = firebase.database().ref(`${mValue}`);
    ref.once("value")
    .then((snapshot) => {
        let Id = snapshot.child("ID").val()
        let Name = snapshot.child("name").val()
        let Avatar = snapshot.child("Avatar").val()
        let email = snapshot.child("email").val()

        let arr = this.state.arrUser
        arr.push({Id, Name, Avatar, email})
        this.setState({arrUser: arr})
    }).catch(err=> console.log(err));

>这是另一个文件中的关联堆栈逻辑代码：

 List<String> images = [
  "assets/berries-chocolates-delicious-918327.jpg",
  "assets/adult-beauty-cosmetic-1029896.jpg",
  "assets/aerial-shot-architecture-beach-1488515.jpg",
  "assets/brush-brushes-cosmetics-212236.jpg",
];

List<String> title = [
  "Cadbury",
  "Biotherme",
  "Trip Advisor",
  "L'Oreal Paris",
];

这是关联的小部件文件代码：

              Stack(
                children: <Widget>[
                  CardScrollWidget(currentPage),
                  Positioned.fill(
                    child: PageView.builder(
                      itemCount: images.length,
                      controller: controller,
                      reverse: true,
                      itemBuilder: (context, index) {
                        return Container();
                      },
                    ),
                  )
                ],
              ),
//              SizedBox(
//                height: 10.0,
//              ),

将在此处添加手势检测器以创建导航链接

import 'package:flutter/material.dart';
import '../screens/introductory_screen.dart';
import 'data.dart';
import 'dart:math';
import '../constants/constants.dart';

class CardScrollWidget extends StatefulWidget {
  var currentPage;

  CardScrollWidget(this.currentPage);

  @override
  _CardScrollWidgetState createState() => _CardScrollWidgetState();
}

class _CardScrollWidgetState extends State<CardScrollWidget> {
  var padding = 20.0;

  var verticalInset = 20.0;

  @override
  Widget build(BuildContext context) {
    return new AspectRatio(
      aspectRatio: widgetAspectRatio,
      child: LayoutBuilder(builder: (context, contraints) {
        var width = contraints.maxWidth;
        var height = contraints.maxHeight;

        var safeWidth = width - 2 * padding;
        var safeHeight = height - 2 * padding;

        var heightOfPrimaryCard = safeHeight;
        var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio;

        var primaryCardLeft = safeWidth - widthOfPrimaryCard;
        var horizontalInset = primaryCardLeft / 2;

        List<Widget> cardList = List();

        for (var i = 0; i < images.length; i++) {
          var delta = i - widget.currentPage;
          bool isOnRight = delta > 0;

          var start = padding +
              max(
                  primaryCardLeft -
                      horizontalInset * -delta * (isOnRight ? 15 : 1),
                  0.0);

          var cardItem = Positioned.directional(
            top: padding + verticalInset * max(-delta, 0.0),
            bottom: padding + verticalInset * max(-delta, 0.0),
            start: start,
            textDirection: TextDirection.rtl,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16.0),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.deepPurpleAccent,
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black12,
                          offset: Offset(3.0, 6.0),
                          blurRadius: 10.0)
                    ]),
                child: AspectRatio(
                  aspectRatio: cardAspectRatio,
                  child: Stack(
                    fit: StackFit.expand,
                    children: <Widget>[
                      Image.asset(
                        images[i],
                        fit: BoxFit.cover,
                      ),
                      Align(
                        alignment: Alignment.bottomLeft,
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Padding(
                              padding: EdgeInsets.symmetric(
                                  horizontal: 16.0, vertical: 8.0),
                              child: Container(
                                decoration: BoxDecoration(
                                  color: Colors.deepPurpleAccent,
                                  borderRadius: BorderRadius.circular(10.0),
                                ),
                                child: Padding(
                                  padding: const EdgeInsets.all(6.0),

将在此处添加手势检测器以创建导航链接

                         child: Text(
                                    title[i],
                                    style: kCampaignLabelStyle,
                                  ),
                                ),
                              ),
                            ),

如果任何人都可以提供导航逻辑方面的帮助，我将不胜感激。

Answer 1

尝试下面的导航代码，它对我有用

如果要在按钮的单击事件上导航页面，请编写代码

return new RaisedButton(
  child: Text(buttonText),
  onPressed: () {
    Navigator.push(
        context, MaterialPageRoute(builder: (context) => redirection_page_name));
  });

注意：此处 redirection_page_name 是要在按钮的单击事件中加载的页面或窗口小部件名称。

原始语法是

 Navigator.push(context, MaterialPageRoute(builder: (context) => redirection_page_name));

此处context是当前构建的屏幕小部件上下文，redirection_page_name是正在加载的新页面/小部件。

Answer 2

创建单独的文件

Cadbury.dart

class Cadbury extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CadburyState();
  }
}

class CadburyState extends State<DashboardApp> {

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
        appBar: AppBar(
          title: Text("Cadbury Screen"),
          backgroundColor: MyColor.colorRed,
        ),
        backgroundColor: MyColor.colorRed,
        body: new Center());
  }
}

Biotherme.dart

class Biotherme extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return BiothermeState();
  }
}

class BiothermeState extends State<Biotherme> {

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
        appBar: AppBar(
          title: Text("Biotherme Screen"),
          backgroundColor: MyColor.colorRed,
        ),
        backgroundColor: MyColor.colorRed,
        body: new Center());
  }
}

并进行这样的重定向

// common function to create button and redirects the page which is in callback name
Widget buttonBuilder(
    String buttonText, BuildContext context, Widget callbackName) {
  return new RaisedButton(
      child: Text(buttonText),
      onPressed: () {
        Navigator.push(
            context, MaterialPageRoute(builder: (context) => callbackName));
      });
}


// home redirection screen which redirects to the cadbury and Biotherme screen
class RedirectionScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(title: Text("Home Screen")),
        body: Center(
          child: new Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              buttonBuilder('Cadbury Screen', context, Cadbury()),
              buttonBuilder('Biotherme Screen', context, Biotherme()),
            ],
          ),
        ));
  }
}

如何快速浏览堆栈中的另一个页面？

2 个答案: