带有 ListView 和底部 TextField 的 Flutter AlertDialog

Question

我正在做一个 Flutter 项目，我试图实现一个类似于 option's dialog specified on MaterialDesign Guidelines 的 AlertDialog，但底部有一个 TextInput。

我已经设法得到了与我想要的类似的东西，但我有一个问题我无法解决：当用户点击 TextInput 并且出现键盘时，我希望 TextInput 位于列表视图在 y 轴上变小的键盘（这就是为什么我只是在 ConstrainedBox 上设置 maxHeight），以便用户可以看到他的文本，但我得到的恰恰相反，列表视图保持相同的大小和InputText 不可见。

我曾尝试使用嵌套在 SingleChildScrollView 上的列更改列表视图，或将整个原始列包装在 SingleChildScrollView 上，但其中 none 似乎有效。这是我当前的代码：

@override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(widget.title),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20))
      ),
      actions: <Widget>[
        FlatButton(
          child: const Text('CANCEL'),
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          textColor: Theme.of(context).accentColor,
          onPressed: () {
            widget.onCancel();
          },
        ),
        FlatButton(
          child: const Text('OK'),
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          textColor: Theme.of(context).accentColor,
          onPressed: () {
            widget.onOk();
          },
        ),
      ],
      content: Container(
        width: double.maxFinite,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Divider(),
            ConstrainedBox(
              constraints: BoxConstraints(
                maxHeight: MediaQuery.of(context).size.height*0.4,
              ),
              child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: widget.exercises.length,
                  itemBuilder: (BuildContext context, int index){
                    return RadioListTile(
                        title: Text(widget.exercises[index].name),
                        value: index,
                        groupValue: _selected,
                        onChanged: (value){
                          setState(() {
                            _selected = index;
                          });
                        }
                    );
                  }
              ),
            ),
            Divider(),
            TextField(
              autofocus: false,
              maxLines: 1,
              style: TextStyle(fontSize: 18),
              decoration: new InputDecoration(
                border: InputBorder.none,
                hintText: widget.hintText,
              ),
            ),
          ],
        ),
      ),
    );
  }

有人可以帮我吗？

非常感谢！！

Answer 1

您可以复制粘贴运行下面的完整代码
您可以在 content 中使用 SingleChildScrollView
代码片段

 content: SingleChildScrollView(
        child: Container(
          width: double.maxFinite,

工作演示

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class Exercise {
  String name;
  Exercise({this.name});
}

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> {
  int _counter = 0;
  List<Exercise> exercises = [
    Exercise(name: 'A'),
    Exercise(name: 'B'),
    Exercise(name: 'C'),
    Exercise(name: 'D'),
    Exercise(name: 'E'),
    Exercise(name: 'F'),
    Exercise(name: 'G')
  ];
  int _selected;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(widget.title),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20))),
      actions: <Widget>[
        FlatButton(
          child: const Text('CANCEL'),
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          textColor: Theme.of(context).accentColor,
          onPressed: () {
            //widget.onCancel();
          },
        ),
        FlatButton(
          child: const Text('OK'),
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          textColor: Theme.of(context).accentColor,
          onPressed: () {
            //widget.onOk();
          },
        ),
      ],
      content: SingleChildScrollView(
        child: Container(
          width: double.maxFinite,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Divider(),
              ConstrainedBox(
                constraints: BoxConstraints(
                  maxHeight: MediaQuery.of(context).size.height * 0.4,
                ),
                child: ListView.builder(
                    shrinkWrap: true,
                    itemCount: exercises.length,
                    itemBuilder: (BuildContext context, int index) {
                      return RadioListTile(
                          title: Text(exercises[index].name),
                          value: index,
                          groupValue: _selected,
                          onChanged: (value) {
                            setState(() {
                              _selected = index;
                            });
                          });
                    }),
              ),
              Divider(),
              TextField(
                autofocus: false,
                maxLines: 1,
                style: TextStyle(fontSize: 18),
                decoration: new InputDecoration(
                  border: InputBorder.none,
                  hintText: "hint",
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

带有 ListView 和底部 TextField 的 Flutter AlertDialog

Flutter AlertDialog with ListView and bottom TextField

android

listview

android-alertdialog

flutter