在 Flutter 中,取内容高度或屏幕高度中较高的一个

px9o7tmv  于 2022-12-19  发布在  Flutter
关注(0)|答案(1)|浏览(218)

我正在设计一个登录和注册屏幕。我想使用整个屏幕的高度,如果内容小于屏幕高度,并使用Expandable()列内,否则我希望它是可滚动的。以避免底部溢出。
我已经尝试了这两种方法Flutter - Enable scroll only if content height is greater than screen height和flutter -正确的方法来创建一个从minHeight开始,增长到maxHeight的框
这是我曾经尝试过的,

Widget build(BuildContext context) {
return Scaffold(
  resizeToAvoidBottomInset: true,
  appBar: AppBar(
    toolbarHeight: 56,
  ),
  body: Form(
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,
          // mainAxisSize: MainAxisSize.min,
          children: [
            Column(
              children: [
                vSpace10,
                const H1('Enter your Mobile Number'),
                vSpace25,
                InputField(
                  hintText: "MobileNumber",
                ),
              ],
            ),

            // const Expanded(child: SizedBox()),
            Column(
              children: [
                MyButton(title: "Sign In", onTap: () {}),
                vSpace25, 
                // const SizedBox(height: 200,)
              ],
            ),
          ]),

      // child: Container(
      //   constraints: BoxConstraints(
      //     minHeight: MediaQuery.of(context).size.height - 120 ,
      //   ),
      //   child: SingleChildScrollView(
      //     child: Container(
      //         constraints: BoxConstraints(
      //     minHeight: MediaQuery.of(context).size.height - 120.0  ,
      //   ),
      //       child: Column(
      //         mainAxisAlignment: MainAxisAlignment.spaceBetween,
      //         // mainAxisSize: MainAxisSize.min,
      //         children: [
      //           Column(
      //             children: [
      //                 vSpace10,
      //         const H1('Enter your Mobile Number'),
      //         vSpace25,
      //         InputField(
      //           hintText: "MobileNumber",
      //         ),
      //             ],
      //           ),

      //         // const Expanded(child: SizedBox()),
      //         MyButton(title: "Sign In", onTap: () {

      //         },),
      //       ]),
      //     ),
      //   ),
      // ),
    ),
  ),
);

}
我试过很多方法,但都没有达到预期的效果;

xriantvc

xriantvc1#

要使内容可滚动,您必须将其 Package 在SingleChildScrollView窗口小部件中
可以这样做,

Scaffold(
    resizeToAvoidBottomInset: true,
    appBar: AppBar(
      toolbarHeight: 56,
    ),
    body: SingleChildScrollView(
      child: Form(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            // mainAxisSize: MainAxisSize.min,
            children: [
              Column(
                children: [
                  vSpace10,
                  const H1('Enter your Mobile Number'),
                  vSpace25,
                  InputField(
                    hintText: "MobileNumber",
                  ),
                ],
              ),
    
              // const Expanded(child: SizedBox()),
              Column(
                children: [
                  MyButton(title: "Sign In", onTap: () {}),
                  vSpace25,
                  // const SizedBox(height: 200,)
                ],
              ),
            ],
          ),
        ),
      ),
    ),
  );

相关问题