Question

我想要实现一种布局，其中仅主按钮小部件将始终保留在支架的底部。其他小部件将放置在SingleChildScrollView-> Column中。

但是，当TextField或TextFormField对准焦点时，键盘应将整个屏幕推到布局的底部，以便按钮可见。

使用SingleChildScrollView仅将TextField或TextFormField保持在键盘上方，而不保持在按钮上方。

我的代码：

body: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Container(
            height: screenHeight(context) - kToolbarHeight - 24,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                PlaceHolder(),
                SizedBox(height: 20.0),
                Text('Select Time'),
                SizedBox(height: 10.0),
                PlaceHolder(),
                SizedBox(height: 20.0),
                PlaceHolder(),
                SizedBox(height: 20.0),
                // InputField is a TextFormField
                InputField(
                  controller: _dataController,
                  labelText: 'Enter Data',
                  fieldFocusNode: _dataFocusNode,
                  textInputType: TextInputType.text,
                ),
                SizedBox(height: 20.0),
                CheckboxListTile(),
                SizedBox(height: 20.0),
                PrimaryButton(
                  buttonText: 'Save',
                  onPressed: () {},
                ),
                SizedBox(height: 20.0),
              ],
            ),
          ),
        ),

这是两个屏幕的布局。您可以忽略TextFormField和Main Button以外的所有其他小部件。

屏幕一：没有键盘（TextField或TextFormField未聚焦）

屏幕二：使用键盘（焦点对准TextField或TextFormField）

Answer 1

请按照以下步骤操作：

1。。卸下固定高度的var user = Firebase.auth().currentUser; var uid = user.uid; const [getVouchers, voucherList, errorMessage] = getVouchersAPI(ID); //List of vouchers to be checked const [isClaimed] = isClaimedAPI(); return( <ScrollView> {voucherList.map((item, index) => { var voucher = item; var isVoucherClaimed = isClaimed(voucher.voucherID, uid); console.log("this is result, ", isVoucherClaimed); if ( isVoucherClaimed === false ) { return <Text>{item.name}<Text> } })} </ScrollView> );。

2。。在页面底部添加一个Container小部件，并将其Padding内边距设置为bottom。

3。。将MediaQuery.of(context).viewInsets.bottom添加到reverse: true。

4。。将SingleChildScrollView添加到resizeToAvoidBottomInset: false。

5。。将Scaffold添加到resizeToAvoidBottomPadding: false。

完整代码 ：（更改带有注释）

Scaffold

Answer 2

用SingleChildScrollView

包裹屏幕

当TextField或TextFormField被聚焦时，将屏幕底部推到键盘顶部

2 个答案: