Question

我添加了Dialog，但是底部满溢。如何解决此问题？ 返回showDialog

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

Answer 1

要进行水平溢出，请为您的Expanded添加一个Text父窗口小部件。

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

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

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

Answer 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>[
          ....
          ....
        ],
      ),
    ),
  ),
),

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

2 个答案: