如何在flutter中使用SingleChildScrollView()

kninwzqo  于 2023-03-24  发布在  Flutter
关注(0)|答案(2)|浏览(145)

我尝试使用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
有什么建议应该改变什么吗?

nlejzf6q

nlejzf6q1#

SingleChildScrollView接受一个固定高度的子对象。您正在使用Column中的Flexible小部件,它没有固定的高度。因此,您可以为Container提供一个固定的高度(MediaQuery.of(context).size.height),以将布局高度固定为等于设备高度。如果小部件溢出此高度,则它将自动变为可滚动。
请仔细阅读此部分,以详细了解SingleChildScrollViewhttps://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
下面是代码,供大家参考:

Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 32),
            height: MediaQuery.of(context).size.height,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                //logo
                // SvgPicture.asset("assets/icon_oinkgram.svg",height: 64,color: Colors.pink.shade200,)
                Flexible(child: Container()),

                Column(
                  children: [
                    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()),
                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),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
tct7dpnv

tct7dpnv2#

用SizedBox Package 列并将其高度设置为

SingleChildScrollView(
  child: SizedBox(
    height: MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // ...
      ],
    ),
  ),
),

输出:

  • 希望能成功 *

相关问题