Question

我遇到了 Flutter (Dart) RenderFlex 溢出像素的问题。渲染库异常。

当键盘打开时，它会在下面显示 thar 消息：

RenderFlex 在底部溢出了 45enter image description here 像素。

如果你需要完整的日志来帮助我，这里是：

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      child: Container(
        margin: EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            TextField(
              decoration: InputDecoration(labelText: 'Title'),
              controller: _titleController,
              onSubmitted: (_) => _submitData,
              // onChanged: (val) {
              //   titleInput = val;
              // },
            ),
            TextField(
              decoration: InputDecoration(labelText: 'Amount'),
              controller: _amountController,
              keyboardType: TextInputType.number,
              onSubmitted: (_) => _submitData,
              // onChanged: (val) => amountInput = val,
            ),
            Container(
              height: 70,
              child: Row(
                children: [
                  Expanded(
                    child: Text(_selectedDate == null
                        ? "No Date Choosen!"
                        : 'Picked Date: ${DateFormat.yMd().format(_selectedDate)}'),
                  ),
                  TextButton(
                      onPressed: _presentDatePicker,
                      child: Text(
                        'Choose the Date!',
                        style: TextStyle(
                            color: Theme.of(context).primaryColor,
                            fontWeight: FontWeight.bold),
                      ))
                ],
              ),
            ),
            ElevatedButton(
              onPressed: _submitData,
              // () {
              // print(titleInput);
              // print(amountInput);
              // print(titleController.text);
              // print(amountController.text);
              //   addTx(
              //       titleController.text, double.parse(amountController.text));
              // },
              child: Text(
                'Add Transaction',
                style: TextStyle(color: Colors.white),
              ),
              style: ButtonStyle(
                  foregroundColor: MaterialStateProperty.all(Colors.purple)),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以将 SingleChildScrollView 添加到 Card 小部件。滚动页面会有所帮助，像素错误将消失。

Answer 2

您可以通过 SinglechildScrollView 包装卡片小部件，这将使其可滚动，因此为键盘提供足够的大小，并且在 Scaffold 中您也可以制作它

resizeToAvoidBottomInset: true,

RenderFlex 在底部溢出了 45 个像素？

2 个答案: