flutter - 点按功能上的Flutter GridView菜单不起作用

Question

我正在尝试使用最新版本的应用程序。我想创建片段而不是页面。现在在主页片段中，我试图制作一个包含6个菜单项的gridview菜单。我被onTap函数困住了，因为我想在点击菜单时移动另一个片段。它不起作用。我正在分享我的代码。提前致谢。

import 'package:flutter/material.dart';
import 'package:folder/fragments/fragment_form.dart';

class HomeFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
        height: MediaQuery.of(context).size.height / 1,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            //stops: [0.1, 0.5, 0.7, 0.9],
            colors: [
              Colors.teal[50],
              Colors.cyan[50],
              Colors.blue[50],
            ],
          ),
        ),
        child: new Center(
          child: new HomepageFragment(),
        )
    );
  }

}

class HomepageFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20.0),
      child: new GridView.count(
        crossAxisCount: 2,
        children: <Widget>[
          MyMenu(titleText: "Add Complain", iconImage: Icons.add_box, iconColor: Colors.cyan, position: 0),
          MyMenu(titleText: "Log In", iconImage: Icons.account_box, iconColor: Colors.cyan, position: 1),
          MyMenu(titleText: "About App", iconImage: Icons.airplay, iconColor: Colors.cyan, position: 2),
          MyMenu(titleText: "How we Work", iconImage: Icons.alarm_on, iconColor: Colors.cyan, position: 3),
          MyMenu(titleText: "All Complains ", iconImage: Icons.apps, iconColor: Colors.cyan, position: 4),
          MyMenu(titleText: "Privacy", iconImage: Icons.assistant, iconColor: Colors.cyan, position: 5),
        ],
      ),
    );
  }
}

class MyMenu extends StatelessWidget {

  MyMenu({this.titleText, this.iconImage, this.iconColor, this.position});
  final String titleText;
  final IconData iconImage;
  final MaterialColor iconColor;
  final int position;


  _getMenuTem(position){
    switch (position) {
      case 0:
        return new FormFragment();
      case 1:
        return new FormFragment();
      case 2:
        return new FormFragment();
      case 3:
        return new FormFragment();

      default:
        return new Text("Something went wrong");
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: Colors.white,
      margin: EdgeInsets.all(10.0),
      child: InkWell(
        onTap: () => _getMenuTem(position),
        onLongPress: () => _getMenuTem(position),
        splashColor: Colors.green,
        child: new Center(
          child: new Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(
                iconImage,
                size: 100.0,
                color: iconColor,
              ),
              Text(titleText, style: new TextStyle(fontSize: 17, color: Colors.teal[800])),

            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您的_getMenuTem方法返回的是Widget，因此您无法获得预期的行为。
要将navigate移至新屏幕，您需要使用Navigator类:

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

我以您的代码为例添加了一个演示:

_getMenuTem(position, context) {
    switch (position) {
      case 0:
        // navigate to specific screen
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => FormFragment(),
          ),
        );
        break;
      case 1:
        // navigate to specific screen
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => FormFragment(),
          ),
        );
        break;
      case 2:
        // navigate to specific screen
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => FormFragment(),
          ),
        );
        break;
      case 3:
        // navigate to specific screen
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => FormFragment(),
          ),
        );
        break;
      default:
        return new Text("Something went wrong");
    }
  }