使用onTap(Inkwell)打开/预览卡

时间:2019-06-23 22:54:53

标签: flutter dart

enter image description here

我正在尝试使用Inkwell中的onTap打开/预览现有卡,但不确定如何执行此操作,因为现在我只打印“ hello”

  body: Container(
    color: Colors.indigo,
    child: Column(
      children: <Widget>[
        Flexible(
          child: FirebaseAnimatedList(
            query: databaseReference,
            itemBuilder: (
                _, DataSnapshot snapshot,
                Animation<double> animation, int index) {
              return Card(
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: InkWell(
                    child: ListTile(
                      title: Text(
                          boardMessages[index].subject,
                      style: TextStyle(fontWeight: FontWeight.bold
                      ),),
                    ),
                    onTap: (){
                      print('hello');
                    },
                  ),
                ),
              );
            },
           ),
          ),
         ],
        ),

编辑:感谢提供的文档,我知道如何使用“全屏页面”来做到这一点,我该如何使用对话框来做到这一点?非常感谢

1 个答案:

答案 0 :(得分:1)

在onTap抽屉项目上执行以下操作:

onTap: () {
   Navigator.pop(context);
   _showDialog(text: 'Index $index');
}

并使用以下代码显示带有必要文本的对话框:

void _showDialog({@required String text}) {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) {
        return Dialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(4),
          ),
          elevation: 0,
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10,
            ),
            child: IntrinsicWidth(
              child: IntrinsicHeight(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    SizedBox(
                      height: 10,
                    ),
                    Text(
                      "Custom Alert Dialog",
                      style: TextStyle(
                        fontWeight: FontWeight.w700,
                        fontSize: 18,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Text(
                      text,
                      style: TextStyle(
                        fontWeight: FontWeight.w400,
                        fontSize: 16,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Align(
                      alignment: Alignment.bottomRight,
                      child: FlatButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: Text("OK"),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );

如果完全可自定义,可以满足您的任何需求。

Custom Dialog