带有 ListView 和底部 TextField 的 Flutter AlertDialog

Posted 2023-02-23

【中文标题】带有 ListView 和底部 TextField 的 Flutter AlertDialog

【英文标题】：Flutter AlertDialog with ListView and bottom TextField

【发布时间】：2020-07-19 22:44:12

【问题描述】：

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

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

我尝试使用嵌套在 SingleChildScrollView 上的列更改列表视图，或者将整个原始列包装在 SingleChildScrollView 上，但它们似乎都不起作用。 这是我当前的代码：

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

有人可以帮我吗？

非常感谢！！

【参考方案1】：

您可以在下面复制粘贴运行完整代码 你可以在content 使用SingleChildScrollView 代码 sn -p

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

【讨论】：

哇，原来这么简单。非常感谢！！

很高兴为您提供帮助。如果对您有帮助，请将其标记为答案。谢谢。