彈出對話框中的按動對話框

Question

通過單擊要彈出對話框的按鈕，我有一個按鈕，我通過使用showDialog並在那里調用我的dialog方法來做到這一點。 但是我不知道如何使用圖像文字並在一行中得分。

提供了圖片，代碼也建議我，好嗎？

這是使用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)),
           ),

我的對話方法

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),
          ),
        ),
      ],
    ),
  ),
);

預期的結果是

Answer 1

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Testing")),
    body: Center(
      child: RaisedButton(
        child: Text("Show dialog"),
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return Dialog(
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
                elevation: 16,
                child: Container(
                  height: 400.0,
                  width: 360.0,
                  child: ListView(
                    children: <Widget>[
                      SizedBox(height: 20),
                      Center(
                        child: Text(
                          "Leaderboard",
                          style: TextStyle(fontSize: 24, color: Colors.blue, fontWeight: FontWeight.bold),
                        ),
                      ),
                      SizedBox(height: 20),
                      _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 1", score: 1000),
                      _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 2", score: 2000),
                      _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 3", score: 3000),
                      _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 4", score: 4000),
                      _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 5", score: 5000),
                      _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 6", score: 6000),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    ),
  );
}

Widget _buildName({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),
              radius: 30,
            ),
            SizedBox(width: 12),
            Text(name),
            Spacer(),
            Container(
              padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
              child: Text("${score}"),
              decoration: BoxDecoration(
                color: Colors.yellow[900],
                borderRadius: BorderRadius.circular(20),
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

Answer 2

您需要為此更改代碼的結構，

首先，您需要為對話框創建一個單獨的類（以便可以在其上傳遞數據），

然后，您需要為這種“列表視圖”圖塊創建自定義圖塊類。

然后，您需要在自定義對話框中創建列表視圖，並在列表視圖中調用這些磁貼。

在您單擊按鈕時，只需在調用對話框時傳遞數據即可。