Flutter中点击图片想跳转到另一个页面

Question

我是Flutter的新手，我正在尝试设计一个页面让用户选择用户类型。我正在尝试使用 onTap 方法，这样当我单击图片时，我会转到选定的用户类型页面，但是当我使用 onTap 方法时，用户类型图像会消失。我不知道我是否使用了正确的方法，或者我是否以错误的方式使用它。但这是我的代码，您也许可以帮助我 :) 谢谢

import 'package:flutter/material.dart';

class ChooseUser extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Container(
          padding: const EdgeInsets.fromLTRB(0, 250, 0, 0),
          child: new Column(
            children: [
              new Container(
                alignment: Alignment(0.4, 0.2),
                child: new Text(
                  "فضلًا أختر نوع المستخدم",
                  style: TextStyle(
                      fontSize: 30,
                      fontFamily: 'Cairo',
                      color: Color(0xFF403E3E),
                      shadows: [
                        Shadow(
                            color: Color(0xFF403E3E),
                            offset: Offset(1, 1),
                            blurRadius: 1)
                      ]),
                ),
              ),
              new Container(
                  height: 300.0,
                  width: 300.0,
                  padding: const EdgeInsets.fromLTRB(15, 120, 0, 0),
                  child: new Row(children: [
                    new Column(
                      children: [
                        new Container(
                          margin: const EdgeInsets.only(right: 40.0),
                          height: 100.0,
                          width: 100.0,
                          decoration: new BoxDecoration(
                            image: DecorationImage(
                                image: new AssetImage(
                                    'assets/images/elderly-icon.png'),
                                fit: BoxFit.fill),
                          ),
                        ),
                        new Container(
                            margin: const EdgeInsets.only(right: 40.0, top: 10),
                            child: new Text(
                              "كبير سن",
                              style: TextStyle(
                                  fontSize: 20,
                                  fontFamily: 'Cairo',
                                  color: Color(0xFF403E3E),
                                  shadows: [
                                    Shadow(
                                        color: Color(0xFF403E3E),
                                        offset: Offset(1, 1),
                                        blurRadius: 1)
                                  ]),
                            )),
                      ],
                    ),
                    new Column(children: [
                      GestureDetector(
                        onTap: () {
                          Navigator.of(context).pushNamed('medical-choose');
                          new Container(
                            margin: const EdgeInsets.only(left: 20.0),
                            height: 100.0,
                            width: 100.0,
                            decoration: new BoxDecoration(
                              image: DecorationImage(
                                  image: new AssetImage(
                                      'assets/images/staff-icon.png'),
                                  fit: BoxFit.fill),
                            ),
                          );
                          new Container(
                            margin: const EdgeInsets.only(left: 10.0, top: 10),
                            child: new Text(
                              "طاقم طبي",
                              style: TextStyle(
                                  fontSize: 20,
                                  fontFamily: 'Cairo',
                                  color: Color(0xFF403E3E),
                                  shadows: [
                                    Shadow(
                                        color: Color(0xFF403E3E),
                                        offset: Offset(1, 1),
                                        blurRadius: 1)
                                  ]),
                            ),
                          );
                        },
                      ),
                    ]),
                  ])),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

在onTap()方法中，函数中通常不渲染任何内容。

GestureDetector 应该有儿童形象，onTap() 应该只有 Navigator.pushNamed

像这样：

    GestureDetector(
      child: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(
                          'assets/images/staff-icon.png'
                      ),
                      fit: BoxFit.fill
                  )
              )
          )
      ),
      onTap: (){
        Navigator.of(context).pushNamed('medical-choose');
      },
    );

Answer 2

首先 new 关键字是可选的，其次不需要使用 GestureDetector 而是使用 InkWell 小部件，这是所有可点击小部件的基础。

InkWell(
      child: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(
                          'assets/images/staff-icon.png'
                      ),
                      fit: BoxFit.fill
                  )
              )
          )
      ),
      onTap: () {
        Navigator.of(context).pushNamed('medical-choose');
      },
    );

Flutter中点击图片想跳转到另一个页面

I want to go to another page when I click on the image in Flutter

dart

flutter

ontap