Flutter: 带有TextField/TextFormField的底部弹出框

Question

在我们的应用程序中，我想要一个类似下面代码的简单BottomSheet表单。不幸的是，当我将它放入时，出现了错误。

在执行布局时抛出了以下断言：通常由TextField创建的InputDecorator不能具有无限制的宽度。这会在父小部件未提供有限宽度约束时发生。例如，如果InputDecorator包含在Row中，则其宽度必须受到限制。可以使用Expanded小部件或SizedBox来约束InputDecorator或其中包含的TextField的宽度。 'package:flutter/src/material/input_decorator.dart'：失败的断言： 第881行第7个字符：'layoutConstraints.maxWidth < double.infinity'

我实现的代码：

  void _settingModalBottomSheet(context){
    showModalBottomSheet(
        context: context,
        elevation: 8.0,
        builder: (BuildContext bc){
          return Directionality(
            textDirection: TextDirection.rtl,
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: 250.0
              ),
              child: Container(
                padding: EdgeInsets.fromLTRB(0.0,10.0,0.0,10.0),
                child: new Wrap(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Center(
                        child: Text(
                          'please fill this form',
                          style: TextStyle(
                            fontSize: 13.0,
                          ),
                        ),
                      ),
                    ),
                    Divider(),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            Text('item 1'),
                            Container(
                              child: TextField(),
                            )
                          ],
                        ),
                        Column(
                          children: <Widget>[
                            Text('item 2'),
                            Container(
                              child: TextField(),
                            )
                          ],
                        ),

                      ],
                    ),
                  ],
                ),
              ),
            ),
          );
        }
    );
  }

- DolDurma

Answer 1

您需要为TextField提供特定的宽度，只需在Container中提供width，或将您的Column包装在Expanded中即可。

解决方案1

Container(
  width: 100, // do it in both Container
  child: TextField(),
),

解决方案2

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Expanded( // wrap your Column in Expanded
      child: Column(
        children: <Widget>[
          Text('item 1'),
          Container(child: TextField()),
        ],
      ),
    ),
    Expanded( // wrap your Column in Expanded
      child: Column(
        children: <Widget>[
          Text('item 2'),
          Container(child: TextField()),
        ],
      ),
    ),
  ],
),

- CopsOnRoad

Answer 2

将 TextField 放入 Container 中。

 Container(
   width: 100,
   child: TextField()
 ),

- MD ALI

Answer 3

将您的TextField放入一个指定高度的列中。

Column(
  width: 100,
  child: TextField()
),

- loise njoki

---

抱歉，这并没有帮助，用户并没有要求限制“TextField”的高度。 - CopsOnRoad