Flutter 无限宽度异常答案

【问题标题】：Flutter infinite width exceptionFlutter 无限宽度异常
【发布时间】：2020-08-20 10:20:52
【问题描述】：

我想将我的事务标题和日期向左对齐，但是当我为父容器提供行的完整宽度时，即 double.infinity，会引发以下异常“BoxConstraints 强制使用无限宽度”。可能的原因是什么？

body: new Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          new Card(child: new Text("CHART!")),
          new Column(
            children: [
              ...transactions.map((transaction) {
                return new Card(
                  child: new Row(
                    children: [
                      new Container(
                        padding: EdgeInsets.all(10),
                        decoration: new BoxDecoration(
                          border: Border.all(
                            color: Colors.purple,
                            width: 2,
                          ),
                        ),
                        margin: EdgeInsets.symmetric(
                          vertical: 10,
                          horizontal: 15,
                        ),
                        child: new Text(
                          transaction.amount.toString(),
                          style: new TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 20,
                              color: Colors.purple),
                        ),
                      ),
                      new Column(
                        children: [
                          new Container(
                            width: double.infinity,
                            child: new Text(
                              transaction.title,
                              style: new TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 17),
                            ),
                          ),
                          new Container(
                            child: new Text(
                              transaction.date.toString(),
                              style: new TextStyle(color: Colors.grey),
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                );
              })
            ],);

【问题讨论】：

标签： flutter

【解决方案1】：

Row() 小部件没有宽度属性，这意味着您应该将 Row() 放在另一个 Container() 中，以便该行知道它的约束是什么，如下所示：

                  new Row(
                    children: [
                      new Container(
                        padding: EdgeInsets.all(10),
                        decoration: new BoxDecoration(
                          border: Border.all(
                            color: Colors.purple,
                            width: 2,
                          ),
                        ),
                        margin: EdgeInsets.symmetric(
                          vertical: 10,
                          horizontal: 15,
                        ),
                        child: new Text(
                          transaction.amount.toString(),
                          style: new TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 20,
                              color: Colors.purple),
                        ),
                      ),
                      new Column(
                        children: [
                          new Container(
                            width: MediaQuery.of(context).size.width,,
                            child: new Text(
                              transaction.title,
                              style: new TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 17),
                            ),
                          ),
                          new Container(
                            child: new Text(
                              transaction.date.toString(),
                              style: new TextStyle(color: Colors.grey),
                            ),
                          ),
                        ],
                      )
                    ],

注意：new 关键字是可选的。此外，将宽度设置为无穷大只会导致问题，因为它总是会超出屏幕，造成溢出。

【讨论】：

唯一需要的更改是从double.infinity 到MediaQuery.of(context).size.width，这会返回显示的宽度。

【解决方案2】：

问题是You are setting stretch for crossAxisAlignment，它为列提供了无限宽度。您可以通过设置宽度属性为容器提供约束

width: MediaQuery.of(context).size.width

这应该可行。

【讨论】：