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

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 会自动将视图滚动到键盘顶部，但它不知道您已经放置了一个位于屏幕底部的按钮。

使用您当前的代码，您可以简单地将 scrollPadding 替换为具有更大底部（即黄色按钮的大小）的填充，而颤振应该为您完成其余的工作。