Flutter

Question

我正在学习 flutter，但遇到了这个问题。

下面的代码生成图像中的“主”屏幕。使用从列表创建的多个圆形按钮，每个按钮都包含一个图标和文本。

我需要的是在 onTap(){} 调用中包含一个唯一的 link。

我假设将屏幕名称添加到带有图标和文本的同一列表行，然后在 onTap 中使用索引...或类似的东西。

欢迎并真诚地感谢您的帮助。

'''import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_firebase_auth/appbar/app_bar_title.dart';
import 'package:flutter_firebase_auth/drawer/drawer.dart';
import 'package:flutter_firebase_auth/drawer/end_drawer.dart';
import 'package:flutter_firebase_auth/logic/custom_colors.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  static List menuList = [
    _MenuItem(Icons.person, 'Mayor\'s Office', ),
    _MenuItem(Icons.people, 'Employees'),
    _MenuItem(Icons.chat, 'WeChat'),
    _MenuItem(Icons.cancel, 'OPEN'),
    _MenuItem(Icons.business, 'BizList'),
    _MenuItem(Icons.water_damage, 'utilities'),
    _MenuItem(Icons.map, 'Welaka Map'),
    _MenuItem(Icons.email, 'Contact Us'),
    _MenuItem(Icons.info_outline, 'About WelakaOne'),
    _MenuItem(Icons.add, 'About walsh+logic'),
  ];

  get index => null;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.dark,
        backgroundColor: CustomColors.welakaoneBlack,
        title: AppBarTitle(),
        leading: Builder(
          builder: (context) {
            return IconButton(
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              icon: Icon(Icons.menu),
            );
          },
        ),
        actions: <Widget>[
          Builder(
            builder: (context) {
              return IconButton(
                onPressed: () {
                  Scaffold.of(context).openEndDrawer();
                },
                icon: Icon(Icons.person),
              );
            },
          ),
        ],
      ),
      drawer: new MyDrawer(),
      endDrawer: new MyEndDrawer(),
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              CustomColors.welakaoneBlack,
              CustomColors.welakaoneBlueDark,
            ],
            begin: FractionalOffset(0.0, 0.0),
            end: FractionalOffset(1.6, 1.0),
            stops: [0.3, 1.0],
            tileMode: TileMode.clamp,
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: GridView.builder(
            itemCount: menuList.length,
            shrinkWrap: false,
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200.0,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 1.5,
            ),
            itemBuilder: (context, position) {
              return Padding(
                padding: const EdgeInsets.all(0.0),
                child: GestureDetector(
                  onTap: () {Navigator.pushNamed(context, _MenuItem(icon, title))},
                  child: Center(
                    child: Column(
                      children: [
                        Center(
                          child: Card(
                            color: CustomColors.welakaoneWhite,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(100.0),
                            ),
                            elevation: 8,
                            child: Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: Icon(
                                menuList[position].icon,
                                size: 50,
                                color: CustomColors.welakaoneBlueDark,
                              ),
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(6.0),
                          child: Container(
                            alignment: Alignment.bottomCenter,
                            child: Text(
                              menuList[position].title,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontFamily: 'Calibri',
                                fontSize: 16,
                                color: CustomColors.welakaoneWhite,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

class _MenuItem {
  final IconData icon;
  final String title;

  _MenuItem(this.icon, this.title);
}
 '''

Answer 1

您 GestureDetector 的方向是正确的。如果你想打开一个新的屏幕，你可以使用Navigator.of(context).push推一个新的MaterialPageRoute。由于您处于 GridView 构建器函数中，因此您可以使用 menuList[position] 获取当前项目。例如：

GestureDetector(
  onTap: () {
    final title = menuList[position].title;
    Navigator.of(context).push(
      MaterialPageRoute(builder: (BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text(title)),
        );
      }),
    );
  },
  child: ...
)

Flutter - 列表中的可点击 OnTap

Flutter - Clickable OnTap from List

screen

list