当我开始输入 textField 它溢出颤动

Posted 2023-02-23

【中文标题】当我开始输入 textField 它溢出颤动

【英文标题】：When I start typing in textField it overflow flutter

【发布时间】：2021-05-18 17:28:29

【问题描述】：

a screenshot of the App

你好， 我正在设计一个登录屏幕，我想允许用户在 TextFile 小部件中输入用户名和密码，但是每次我尝试这样做时，键盘都会弹出并用丑陋的黑色和黄色方块溢出整个应用程序，我该如何克服呢？

我正在物理设备上运行应用程序，如果这会有所不同的话

Widget build(BuildContext context) 
return Scaffold(
  body: SingleChildScrollView(
    child: SafeArea(
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.fromLTRB(0, 15.0, 10.0, 0),
            width: double.infinity,
            child: GestureDetector(
              onTap: () 
                return Navigator.push(context,
                    MaterialPageRoute(builder: (context) => LoginPage()));
              ,
              child: Container(
                child: Text(
                  'Skip',
                  textAlign: TextAlign.right,
                  style: TextStyle(fontSize: 15.0, color: Colors.grey),
                ),
              ),
            ),
          ),
          Container(
            child: CarouselSlider(
              carouselController: buttonCarouselController,
              options: CarouselOptions(
                enableInfiniteScroll: false,
                viewportFraction: 1.0,
                height: 400.0,
              ),
              items: [
                TheCarouselBuilder(1, 'Learn anytime \nand anywhere '),
                TheCarouselBuilder(2, 'Find a course \nfor you '),
                TheCarouselBuilder(3, 'Improve your skills'),
              ],
            ),
          ),
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.08,
          ),
          GestureDetector(
            onTap: () =>moveToNextPage(),
            child: Container(
              width: MediaQuery.of(context).size.width * 0.85,
              height: MediaQuery.of(context).size.height * 0.1,
              decoration: BoxDecoration(
                color: Color(0xffE3562A),
                borderRadius: BorderRadius.circular(20.0),
              ),
              child: Center(
                child: Text(
                  buttonString,
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 20.0,
          )
        ],
      ),
    ),
  ),
);

【参考方案1】：

在您的 Scaffold 中设置以下值：

resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: false,

完整代码：

Widget build(BuildContext context) 
return Scaffold(
  resizeToAvoidBottomPadding: false,
  resizeToAvoidBottomInset: false,
  body: SingleChildScrollView(
    child: SafeArea(
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.fromLTRB(0, 15.0, 10.0, 0),
            width: double.infinity,
            child: GestureDetector(
              onTap: () 
                return Navigator.push(context,
                    MaterialPageRoute(builder: (context) => LoginPage()));
              ,
              child: Container(
                child: Text(
                  'Skip',
                  textAlign: TextAlign.right,
                  style: TextStyle(fontSize: 15.0, color: Colors.grey),
                ),
              ),
            ),
          ),
          Container(
            child: CarouselSlider(
              carouselController: buttonCarouselController,
              options: CarouselOptions(
                enableInfiniteScroll: false,
                viewportFraction: 1.0,
                height: 400.0,
              ),
              items: [
                TheCarouselBuilder(1, 'Learn anytime \nand anywhere '),
                TheCarouselBuilder(2, 'Find a course \nfor you '),
                TheCarouselBuilder(3, 'Improve your skills'),
              ],
            ),
          ),
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.08,
          ),
          GestureDetector(
            onTap: () =>moveToNextPage(),
            child: Container(
              width: MediaQuery.of(context).size.width * 0.85,
              height: MediaQuery.of(context).size.height * 0.1,
              decoration: BoxDecoration(
                color: Color(0xffE3562A),
                borderRadius: BorderRadius.circular(20.0),
              ),
              child: Center(
                child: Text(
                  buttonString,
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 20.0,
          )
        ],
      ),
    ),
  ),
);

如果您搜索解决方案而不在这里询问，您可以找到更多相关信息，例如： 这是关于如何解决这个问题的stack overflow 问题。

这里有一些视频教程可以解决这个问题。

First Video Second Video