dart 在Flutter中使用SingleChildScrollView体验意外的底部填充

70gysomp  于 2024-01-03  发布在  Flutter
关注(0)|答案(2)|浏览(158)

在Flutter中使用SingleChildScrollView时,我遇到了意外的底部填充。
我试图通过在SingleChildScrollView中设置padding:EdgeInsets.zero来解决这个问题,但底部的padding仍然存在。值得注意的是,我在稳定通道中使用Flutter版本3.16.3。
如果您有任何见解或建议,如何消除这种意想不到的底部填充,我将非常感谢您的帮助。


的数据
这是我的代码

Scaffold(
  body: Container(
    decoration: const BoxDecoration(
      gradient: AppColors.bgGradient,
    ),
    child: SingleChildScrollView(
      padding: EdgeInsets.zero,
      child: Center(
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                height: scWidth - 100.w,
                width: scWidth - 100.w,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.r),
                  border:
                      Border.all(color: AppColors.evTemplateGreen, width: 2),
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10.r),
                  child: QRView(
                    key: qrKey,
                    onQRViewCreated: _onQRViewCreated,
                  ),
                ),
              ),
              height20H,
              AnimatedTextKit(
                animatedTexts: [
                  ColorizeAnimatedText('Scan Device QR Code!',
                      textStyle: ts22Bold(clr: AppColors.white),
                      colors: [
                        AppColors.evTemplateGreen,
                        AppColors.appPurple
                      ]),
                ],
                totalRepeatCount: 2,
                pause: const Duration(milliseconds: 1),
                displayFullTextOnTap: true,
                stopPauseOnTap: true,
              ),
              height10H,
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 30.w),
                child: CustomWidgets.orDivider(),
              ),
              height20H,
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 40.w),
                child: InputTextField(
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Device Id is required';
                      }
                      return null;
                    },
                    controller: deviceIdCont,
                    hintText: 'Device Id'),
              ),
              height20H,

              Padding(
                padding: EdgeInsets.symmetric(horizontal: 40.w),
                child: CustomButtons.mainButton(
                    onTap: () {
                      Get.to(() => const PlugInCar());
                    },
                    title: 'Verify',
                    bgClr: AppColors.evTemplateGreen,
                    titleClr: AppColors.black),
              ),
              // Padding(
              //   padding:  EdgeInsets.symmetric(horizontal: 50.w),
              //   child:  const Divider(
              //       color: AppColors.grey, thickness: 1.5),
              // ),

              // Text('Scan Device QR Code', style: tsWhite18Bold,),
            ],
          ),
        ),
      ),
    ),
  ),
);

字符串

rkkpypqq

rkkpypqq1#

当尝试将Center小部件包含在SingleChildScrollView中时,我遇到了意外的底部填充。但是,在将SingleChildScrollView传输到Form小部件并将其从Center小部件中删除后,该问题已成功解决,并且布局按预期运行。

2fjabf4q

2fjabf4q2#

这是一个例子

final class Example extends StatefulWidget {
  const Example({super.key});

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          color: Colors.blueGrey,
        ),
        child: SingleChildScrollView(
          padding: EdgeInsets.zero,
          child: Form(
            child: SizedBox(
              height: context.mediaQuery.removeViewPadding().size.height,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    height: context.mediaQuery.size.width * .5,
                    width: context.mediaQuery.size.width * .5,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(width: 2),
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: const FlutterLogo(),
                    ),
                  ),
                  const SizedBox(height: 20),

                  const Text(
                    'Scan Device QR Code!',
                  ),

                  const SizedBox(height: 10),
                  const Padding(
                    padding: EdgeInsets.symmetric(horizontal: 30),
                    child: Divider(),
                  ),
                  const SizedBox(height: 20),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 40),
                    child: TextFormField(
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return 'Device Id is required';
                        }
                        return null;
                      },
                      controller: _controller,
                      decoration: const InputDecoration(hintText: 'Device Id', fillColor: Colors.white, filled: true),
                    ),
                  ),
                  const SizedBox(height: 20),

                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 40),
                    child: ElevatedButton(
                      onPressed: () {
                        //     Get.to(() => const PlugInCar());
                      },
                      child: const Text('Verify'),
                    ),
                  ),

                  // Padding(
                  //   padding:  EdgeInsets.symmetric(horizontal: 50.w),
                  //   child:  const Divider(
                  //       color: AppColors.grey, thickness: 1.5),
                  // ),

                  // Text('Scan Device QR Code', style: tsWhite18Bold,),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

字符串
这是基地结构

Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          color: Colors.blueGrey,
        ),
        child: SingleChildScrollView(
          padding: EdgeInsets.zero,
          child: Form(
            child: SizedBox(
              height: context.mediaQuery.removeViewPadding().size.height,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  
                ///
                /// ...Widgets
                ///
                ],
              ),
            ),
          ),
        ),
      ),
    );

相关问题