flutter - 键盘打开时按钮重叠在文本字段上

Question

这是我的问题:按钮不应与文本字段重叠。

请注意，我添加了一个 SingleChildScrollView()。用户仍然可以向上滚动并获得所需的结果，但我想让它自动进行:

这是我的代码:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_masked_text/flutter_masked_text.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:talking_dodo/dodo/pages/payment/credit_card.dart';

class WithdrawPage extends StatefulWidget {
  @override
  WithdrawPageState createState() {
    return new WithdrawPageState();
  }
}

class WithdrawPageState extends State<WithdrawPage> {
  bool isDataAvailable = true;
  int _radioValue = 0;
  MaskedTextController ccMask =
  MaskedTextController(mask: "0000 0000 0000 0000");
  Widget _buildBody() {
    return Stack(
      children: <Widget>[
        SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(
                left: 16.0, right: 16.0, top: 16.0, bottom: 16.0),
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(left: 18.0),
                      child: Text('Please select withdrawal method below'),
                    ),
                  ],
                ),
                Container(
                  margin: EdgeInsets.only(top: 12.0),
                  child: Row(
                    children: <Widget>[
                      new Radio(
                        value: 0,
                        groupValue: _radioValue,
                        onChanged: ((value) {
                          setState(() {
                            _radioValue = value;
                          });
                        }),
                      ),
                      Text(
                        'ATM Withdrawal',
                      ),
                    ],
                  ),
                ),
                Container(
                  height: 220.0,
                  padding: EdgeInsets.only(left: 20.0, right: 10.0),
                  margin: const EdgeInsets.all(2.0),
                  decoration: BoxDecoration(
//                  color: Colors.white,
                    border: Border.all(color: Colors.black),
                    borderRadius: BorderRadius.all(Radius.circular(12.0)),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Bullet('Visit mcb Branch'),
                      Bullet('Select "Dodo Wallet" in the options'),
                      Bullet('Select the amount to withdraw'),
                      Bullet('Input your dodo wallet pin'),
                      Bullet(
                          'Input the code in the input box below and click withdraw'),
                      Padding(
                        padding: const EdgeInsets.only(top:18.0),
                        child: TextField(
                          controller: ccMask,
                          keyboardType: TextInputType.number,
                          maxLength: 19,
                          style:
                              TextStyle(fontFamily: 'Raleway', color: Colors.black),
                          decoration: InputDecoration(
                              labelText: "Code",
                              labelStyle: TextStyle(fontWeight: FontWeight.bold),
                              border: OutlineInputBorder()),
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  children: <Widget>[
                    new Radio(
                      value: 1,
                      groupValue: _radioValue,
                      onChanged: ((value) {
                        setState(() {
                          _radioValue = value;
                        });
                      }),
                    ),
                    Text(
                      'Transfer to card',
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: isDataAvailable
                    ? Expanded(
                        child: ButtonTheme(
                          height: 65.0,
                          child: RaisedButton(
                              color: Theme.of(context).primaryColorLight,
                              child: Text('Withdraw funds'),
                              onPressed: () => showSuccessDialog()),
                        ),
                      )
                    : Padding(
                        padding: EdgeInsets.only(bottom: 10.0),
                        child: CircularProgressIndicator()),
              ),
            ],
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Withdrawal"),
      ),
      body: _buildBody(),
    );
  }

  void showSuccessDialog() {
    setState(() {
      isDataAvailable = false;
      Future.delayed(Duration(seconds: 1)).then((_) => goToDialog());
    });
  }

  goToDialog() {
    setState(() {
      isDataAvailable = true;
    });
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (context) => Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    successTicket(),
                    SizedBox(
                      height: 10.0,
                    ),
                    FloatingActionButton(
                      backgroundColor: Colors.black,
                      child: Icon(
                        Icons.clear,
                        color: Colors.white,
                      ),
                      onPressed: () {
                        Navigator.pop(context);
                        Navigator.of(context).pushNamed('/chat');
                      },
                    )
                  ],
                ),
              ),
            ));
  }

  successTicket() => Container(
        width: double.infinity,
        padding: const EdgeInsets.all(16.0),
        child: Material(
          clipBehavior: Clip.antiAlias,
          elevation: 2.0,
          borderRadius: BorderRadius.circular(4.0),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                ProfileTile(
                  title: "Thank You!",
                  textColor: Colors.purple,
                  subtitle: "Your transaction was successful",
                ),
                ListTile(
                  title: Text("Date"),
                  subtitle: Text("26 June 2018"),
                  trailing: Text("11:00 AM"),
                ),
                ListTile(
                  title: Text("Daniel Daniel"),
                  subtitle: Text("gmail@daniel.com"),
                  trailing: CircleAvatar(
                    radius: 20.0,
                    backgroundImage: NetworkImage(
                        "https://avatars0.githubusercontent.com/u/12619420?s=460&v=4"),
                  ),
                ),
                ListTile(
                  title: Text("Amount"),
                  subtitle: Text("\$423.00"),
                  trailing: Text("Completed"),
                ),
                Card(
                  clipBehavior: Clip.antiAlias,
                  elevation: 0.0,
                  color: Colors.grey.shade300,
                  child: ListTile(
                    leading: Icon(
                      FontAwesomeIcons.ccAmex,
                      color: Colors.blue,
                    ),
                    title: Text("Credit/Debit Card"),
                    subtitle: Text("Amex Card ending ***6"),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
}

class Bullet extends Text {
  const Bullet(
    String data, {
    Key key,
    TextStyle style,
    TextAlign textAlign,
    TextDirection textDirection,
    Locale locale,
    bool softWrap,
    TextOverflow overflow,
    double textScaleFactor,
    int maxLines,
    String semanticsLabel,
  }) : super(
          '• $data',
          key: key,
          style: style,
          textAlign: textAlign,
          textDirection: textDirection,
          locale: locale,
          softWrap: softWrap,
          overflow: overflow,
          textScaleFactor: textScaleFactor,
          maxLines: maxLines,
          semanticsLabel: semanticsLabel,
        );
}

Answer 1

您正在寻找的是 scrollPadding parameter of textfield .当文本字段获得焦点时，Flutter 会自动将 View 滚动到键盘顶部，但它不知道您已将按钮放置在屏幕底部这一事实。

使用您当前的代码，您可以简单地将 scrollPadding 替换为底部较大的填充(即黄色按钮的大小)，而 flutter 应该会为您完成剩下的工作。