一個 RenderFlex 在底部溢出了 45 個像素？

Question

我對 Flutter (Dart) RenderFlex 溢出像素有疑問。 渲染庫的一個例外。

當鍵盤打開時，它會在下面顯示消息：

一個 RenderFlex 溢出了 45 在底部輸入圖像描述這里的像素。

如果您有任何機會需要完整的日志來幫助我，請點擊此處：

  @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,