Question

我有一个动态的国家名称列表。我想在对话框中显示此列表（例如，当用户单击按钮时）。

这是到目前为止我对对话框的实现：

 List<String> countries = [
    'India','Japan','China','USA','France','Egypt','Norway','Nigeria','Colombia','Australia','South Korea','Bangladesh','Mozambique','Canada','Germany','Belgium','Vietnam','Bhutan','Israel','Brazil'
  ];


  @override
  Widget build(BuildContext context) {
    return Dialog(
        child: Container(
      width: 400,
      height: 400,
      child: SingleChildScrollView(
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: countries.length,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(20.0),
                child: Text('${countries[index]}'),
              );
            }),
      ),
    ));
  }
}

我得到的输出如下：

很明显，只有7个国家可见。

我尝试了其他几种选择：

将容器的高度设为double.maxFinite。
在SingleChildScrollView中放入另一列。
列，容器，SingleChildScrollView的所有可能排列

但是，以上方法似乎都不起作用（溢出错误，显示的项目数量有限等）。

我真正想要的是能够在ListView.builder内使用ShowDialog方法显示列表。

Answer 1

已解决：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> _countries = [
    'India',
    'Japan',
    'China',
    'USA',
    'France',
    'Egypt',
    'Norway',
    'Nigeria',
    'Colombia',
    'Australia',
    'South Korea',
    'Bangladesh',
    'Mozambique',
    'Canada',
    'Germany',
    'Belgium',
    'Vietnam',
    'Bhutan',
    'Israel',
    'Brazil'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Push for open list dialog',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _showDialogOnButtonPressing,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  _showDialogOnButtonPressing() => showDialog(
        context: context,
        child: Container(
          width: MediaQuery.of(context).size.width - 40,
          height: MediaQuery.of(context).size.height - 60,
          child: Dialog(
            child: ListView.builder(
              itemCount: _countries.length,
              itemBuilder: (context, index) => ListTile(
                title: Text('${index + 1}. ${_countries[index]}'),
              ),
            ),
          ),
        ),
      );
}

结果出现在图像中，您可以上下滚动而不会出现问题：

在Flutter Show对话框中显示滚动列表

1 个答案: