如何解决对话框中的溢出问题？

Posted 2023-02-23

【中文标题】如何解决对话框中的溢出问题？

【英文标题】：How to fix overflowed issue in Dialog?

【发布时间】：2019-10-12 17:54:24

【问题描述】：

我添加了对话框，但在底部溢出。如何解决这样的问题？ 返回显示对话框

 return showDialog(
        //  barrierDismissible: false,
        context: context,
        builder: (BuildContext context) 
          return  Dialog(
            //this right here
            child: Theme(
              data: ThemeData().copyWith(
                inputDecorationTheme: InputDecorationTheme(
                  border: OutlineInputBorder(),
                ), ),

子容器

              child: Container(
                color: Colors.blueGrey[100],
                height: MediaQuery.of(context).size.height / 2.5,
                width: MediaQuery.of(context).size.width / 1,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[

第一行

                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Expanded(child: Text(AppTranslations.of(context).text("minimum_length")),),
                          Text(": 6")
                        ],),

其他行与第一行相同

填充灰色允许文本

                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: SingleChildScrollView(
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              child: Text(
                            AppTranslations.of(context).text("allowed_character"),
                                style: TextStyle(color: Colors.grey[700]),
                              ), ),],),),),

确定按钮

                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          Expanded(child:
                          FlatButton(
                            child: Text(
                              AppTranslations.of(context).text("ok"),
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                            onPressed: () => Navigator.of(context).pop(),
                          ),),],)],),),),), );

【问题讨论】：

分享完整代码

我添加了完整代码

【参考方案1】：

对于水平溢出，为您的Text 添加一个Expanded 父小部件。

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Expanded(
          child: Text(AppTranslations.of(context).text("minimum_length")),
        ),
        Text(": 6")
      ],
    ),

对于垂直溢出，为您的Column 添加SingleChildScrollView 父级

   Padding(
          padding: const EdgeInsets.all(8.0),
          child: SingleChildScrollView( child : Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[ ...

【讨论】：

谢谢。现在它正在工作..对话框中的另一个溢出问题。

您是否将 singlechildscrollview 添加到您的列中？如果是，请更新您问题中的代码并显示图片

我无法编辑我的帖子...点击编辑按钮时出现 500 错误

你添加SingleChildScrollView了吗？

【参考方案2】：

用SingleChildScrollView包装你的Dialog子元素，即Container Widget。

child: SingleChildScrollView(
  child: Container(
    color: Colors.blueGrey[100],
    height: MediaQuery.of(context).size.height / 2.5,
    width: MediaQuery.of(context).size.width / 1,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          ....
          ....
        ],
      ),
    ),
  ),
),