如何解决颤振活动中84像素过量的底部？

问题描述

我是Flutter的新手，当我单击“文本字段键盘”时，我会进行以下活动，然后在warning例如BottOM OVERFLOWED BY 84 PIXLES还会出现如何解决此问题？当我尝试SingleChildScrollView时，活动的空白区域（“没有小部件的地方”）变成白色。是否有缺少的小部件或我的代码有误？

我的活动

这是我的代码

import 'package:Flutter/cupertino.dart';
import 'package:Flutter/material.dart';
import 'package:marshal/Payment.dart';

import 'bottomnavigationbar.dart';

class Payment2 extends StatefulWidget {
  @override
  _Payment2State createState() => _Payment2State();
}

class _Payment2State extends State<Payment2> {
  @override
  Widget build(BuildContext context) {
    final PaymentButton = Material(
      elevation: 5.0,borderRadius: BorderRadius.circular(30.0),color: Colors.red,child: MaterialButton(
        minWidth: MediaQuery.of(context).size.width,padding: EdgeInsets.fromLTRB(20.0,15.0,20.0,15.0),onpressed: () {
          Route route = MaterialPageRoute(builder: (context) => Paymentdone());
          Navigator.pushReplacement(context,route);
        },child: Text("Payment",textAlign: TextAlign.center,style: style.copyWith(
                color: Colors.white,fontWeight: FontWeight.w800)),),);
    return Scaffold(
      appBar: AppBar(
        title: Text("Payment"),centerTitle: true,body:  Container(
        padding: EdgeInsets.all(16),color: Colors.black,child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
            Padding(
              padding: EdgeInsets.all(25),Text(
              "ENTER YOUR CARD DETAILS",style: TextStyle(
                  fontWeight: FontWeight.w400,color: Colors.white,fontSize: 16),Padding(
              padding: EdgeInsets.all(5),Card(
              color: Color(0xFF1E1E1E),child: ListTile(
                leading: CircleAvatar(),title: Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[
                      Text(
                        "MasterCard",style: TextStyle(fontSize: 16,color: Colors.white),Text(
                        '90 \u0024',],Padding(
              padding: EdgeInsets.all(12),child: cardnumber(),Row(
              children: [
                Container(
                  //height: 60,width: MediaQuery.of(context).size.width * 0.45,color: Color(0xFF1E1E1E),child: TextField(
                    style: style,maxLength: 5,cursorColor: Colors.red,textAlign: TextAlign.left,keyboardType: TextInputType.number,decoration: Inputdecoration(
                      hintText: 'MM/YY',hintStyle: TextStyle(fontSize: 16,border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8),borderSide: BorderSide(
                          width: 0,style: BorderStyle.none,filled: true,contentPadding: EdgeInsets.all(16),Padding(
                  padding: EdgeInsets.all(1),Container(
                  // height: 50,width: MediaQuery.of(context).size.width * 0.44,maxLength: 3,decoration: Inputdecoration(
                      hintText: 'CVV',Container(
              height: 100,PaymentButton,bottomNavigationBar: BottomNavigation(),);
  }

  Widget cardnumber() {
    return TextField(
      style: style,maxLength: 16,decoration: Inputdecoration(
        hintText: 'XXXX XXXX XXXX 1234',border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),borderSide: BorderSide(
            width: 0,);
  }

  TextStyle style =
      TextStyle(fontFamily: 'Montserrat',fontSize: 16.0);
}

解决方法

只需将resizeToAvoidBottomInset: false添加到您的Scaffold

,

您也可以将孩子包裹在SingleChildScrollView

,

在SingleChildScrollView中使用body。为避免出现白色部分问题，请将其包装在Stack内。

Stack(
    children: <Widget>[
      Container(
        padding: EdgeInsets.all(16),color: Colors.black,),SingleChildScrollView(
        scrollDirection: Axis.vertical,child: Container(
          padding: EdgeInsets.all(16),child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
              Padding(
                padding: EdgeInsets.all(25),Text(
                "ENTER YOUR CARD DETAILS",style: TextStyle(
                    fontWeight: FontWeight.w400,color: Colors.white,fontSize: 16),Padding(
                padding: EdgeInsets.all(5),Card(
                color: Color(0xFF1E1E1E),child: ListTile(
                  leading: CircleAvatar(),title: Container(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[
                        Text(
                          "MasterCard",style: TextStyle(fontSize: 16,color: Colors.white),Text(
                          '90 \u0024',],Padding(
                padding: EdgeInsets.all(12),child: cardnumber(),Row(
                children: [
                  Container(
                    //height: 60,width: MediaQuery.of(context).size.width * 0.45,color: Color(0xFF1E1E1E),child: TextField(
                      style: style,maxLength: 5,cursorColor: Colors.red,textAlign: TextAlign.left,keyboardType: TextInputType.number,decoration: InputDecoration(
                        hintText: 'MM/YY',hintStyle: TextStyle(fontSize: 16,border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),borderSide: BorderSide(
                            width: 0,style: BorderStyle.none,filled: true,contentPadding: EdgeInsets.all(16),Padding(
                    padding: EdgeInsets.all(1),Container(
                    // height: 50,width: MediaQuery.of(context).size.width * 0.44,maxLength: 3,decoration: InputDecoration(
                        hintText: 'CVV',Container(
                height: 100,PaymentButton,)
    ],)

,

使用SingleChildScrollView是正确的方法。

为了解决您所讨论的问题，请从容器中删除color属性，然后将其移至支架背景color属性：

return Scaffold(
      backgroundColor: Colors.black,appBar: AppBar(
        title: Text("Payment"),centerTitle: true,body:  SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(16),child: Column(
            // the rest of the widgets...
          ),);