flutter - 在 flutter 中按下按钮弹出对话框

标签 flutter dart dialog

我有一个按钮,点击它我想要弹出一个对话框,我通过使用 showDialog 并在那里调用我的对话框方法来做到这一点。但是我不知道我应该如何使用图像文本和一行中的分数。?

图片已提供,代码也提示给我,好吗?

这里是使用showDialog的地方

      Row(
          children: <Widget>[
            RaisedButton(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 15.0),
              textColor: Colors.black,
              child: Text(
                'LeaderBoard',
                style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              onPressed: () {

                showDialog(
                    context: context,
                    builder: (BuildContext context) => leadDialog);
              },
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0)),
           ),

我的对话框mmethod

import 'package:flutter/material.dart';

Dialog leadDialog = Dialog(
  child: Container(
    height: 300.0,
    width: 360.0,
    color: Colors.white,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.all(15.0),
          child: Text(
            'Choose from Library',
            style:
            TextStyle(color: Colors.black, fontSize: 22.0),
          ),
        ),
      ],
    ),
  ),
);

预期的结果是

enter image description here

最佳答案

截图:

enter image description here


代码:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: ElevatedButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return Dialog(
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
                elevation: 16,
                child: Container(
                  child: ListView(
                    shrinkWrap: true,
                    children: <Widget>[
                      SizedBox(height: 20),
                      Center(child: Text('Leaderboard')),
                      SizedBox(height: 20),
                      _buildRow('assets/choc.png', 'Name 1', 1000),
                      _buildRow('assets/choc.png', 'Name 2', 2000),
                      _buildRow('assets/choc.png', 'Name 3', 3000),
                      _buildRow('assets/choc.png', 'Name 4', 4000),
                      _buildRow('assets/choc.png', 'Name 5', 5000),
                      _buildRow('assets/choc.png', 'Name 6', 6000),
                    ],
                  ),
                ),
              );
            },
          );
        },
        child: Text('Show dialog'),
      ),
    ),
  );
}
  
Widget _buildRow(String imageAsset, String name, double score) {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 20.0),
    child: Column(
      children: <Widget>[
        SizedBox(height: 12),
        Container(height: 2, color: Colors.redAccent),
        SizedBox(height: 12),
        Row(
          children: <Widget>[
            CircleAvatar(backgroundImage: AssetImage(imageAsset)),
            SizedBox(width: 12),
            Text(name),
            Spacer(),
            Container(
              decoration: BoxDecoration(color: Colors.yellow[900], borderRadius: BorderRadius.circular(20)),
              padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
              child: Text('$score'),
            ),
          ],
        ),
      ],
    ),
  );
}

关于flutter - 在 flutter 中按下按钮弹出对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56806136/

相关文章:

json - 无法在Flutter项目中初始化jsonResponse

java - 如果用户在警报对话框中按"is"按钮,如何在列表中添加项目,而如果按“否”则不添加该项目

matlab - 更改 MATLAB 对话框的字体

flutter - 如何在 vscode 上输入时禁用提示

flutter - 在 TextFormField 中禁用单词下划线

dart - JSON.parse 到 Map howto(新语法 0.3.1_r17328)

dart - Google Dart:Dart strrev()函数

java - 如何向已注册的用户名发送对话框

flutter - Flutter Dart-如何使容器具有向外的borderRadius.circular(20)而不是向内的?

flutter - 如何在 flutter 中创建缺口形状