我尝试使用SingleChildScrollView()方法来 Package 一个列,以防止键盘弹出时溢出,但现在整个页面都没有呈现。
import 'package:flutter/material.dart';
import '../widgets/text_field_input.dart';
class SignUpScreen extends StatefulWidget {
const SignUpScreen({Key? key}) : super(key: key);
@override
_SignUpScreenState createState() => _SignUpScreenState();
}
class _SignUpScreenState extends State<SignUpScreen> {
final TextEditingController _emailcontroller = TextEditingController();
final TextEditingController _passwordcontroller = TextEditingController();
final TextEditingController _usernamecontroller = TextEditingController();
final TextEditingController _biocontroller = TextEditingController();
@override
void dispose() {
super.dispose();
_emailcontroller.dispose();
_passwordcontroller.dispose();
_usernamecontroller.dispose();
_biocontroller.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
// resizeToAvoidBottomInset: false,
// backgroundColor: Colors.white,
body: SafeArea(
child: Container(
// color: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 32),
width: double.infinity,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//logo
// SvgPicture.asset("assets/icon_oinkgram.svg",height: 64,color: Colors.pink.shade200,)
Flexible(
child: Container(),
flex: 1,
),
Image.asset(
"assets/logo_oinkgram1.png",
height: 32,
),
const SizedBox(height: 32),
Stack(
children: [
const CircleAvatar(
radius: 64,
backgroundImage: NetworkImage(
"https://wallpapers.com/images/hd/waving-technoblade-anime-fan-art-xjz8fyxbzakvitgq.jpg"),
),
Positioned(
bottom: -15,
left :90,
child: IconButton(
onPressed: () {},
icon: const Icon(
Icons.add_a_photo,
),
),
),
],
),
//EMAIL
const SizedBox(height: 32),
TextFieldInput(
textEditingController: _usernamecontroller,
hintText: "Enter a username",
textInputType: TextInputType.text),
const SizedBox(height: 24),
TextFieldInput(
textEditingController: _emailcontroller,
hintText: "Enter you Email",
textInputType: TextInputType.emailAddress),
const SizedBox(height: 24),
//PASSWORD
TextFieldInput(
textEditingController: _passwordcontroller,
hintText: "Enter your password",
isPass: true,
textInputType: TextInputType.text),
const SizedBox(
height: 24,
),
TextFieldInput(
textEditingController: _biocontroller,
hintText: "write a bio to express yourself",
textInputType: TextInputType.text),
const SizedBox(height: 24),
InkWell(
child: Container(
child: const Text("Sign up"),
width: double.infinity,
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: const ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
),
color: Colors.blue,
),
),
),
const SizedBox(
height: 12,
),
Flexible(
child: Container(),
flex: 1,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: const Text("Already have an account?"),
padding: const EdgeInsets.symmetric(vertical: 8),
),
GestureDetector(
onTap: () {},
child: Container(
child: const Text(
" Sign in",
style: TextStyle(
color: Colors.blue, fontWeight: FontWeight.bold),
),
padding: const EdgeInsets.symmetric(vertical: 8),
),
)
],
)
],
),
),
),
),
);
}
}
我不断地沿着线路出错:在布局过程中,RenderPhysicalModel对象被赋予无限大小。
编辑:1:尝试使用展开的 Package 返回相同的错误:
Errors image
有什么建议应该改变什么吗?
2条答案
按热度按时间nlejzf6q1#
SingleChildScrollView
接受一个固定高度的子对象。您正在使用Column
中的Flexible
小部件,它没有固定的高度。因此,您可以为Container
提供一个固定的高度(MediaQuery.of(context).size.height
),以将布局高度固定为等于设备高度。如果小部件溢出此高度,则它将自动变为可滚动。请仔细阅读此部分,以详细了解
SingleChildScrollView
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html下面是代码,供大家参考:
tct7dpnv2#
用SizedBox Package 列并将其高度设置为
输出: