如何解决如何解决颤振活动中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...
),);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。