【问题标题】:How to resolve background issue in flutter如何解决颤动中的背景问题
【发布时间】:2022-10-06 00:53:48
【问题描述】:

在我的 android flutter 应用程序中输入用于输入电话号码的文本框后,电话文本框没有移动到顶部。它被数字隐藏了。那么,如何解决这个问题呢?背景图片 bg.png 大小为 789X1665 。那么,需要调整 bg 图像的大小还是需要添加一些代码更改?请帮助任何人解决此问题。

  return Scaffold(
  resizeToAvoidBottomInset : false,

  body: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    decoration: BoxDecoration(
        image : DecorationImage(
            image: AssetImage(\'images/bg.png\'),
            fit: BoxFit.contain
        )
    ),
    child: SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

          SizedBox(height: 500,),

          Container(
            margin:EdgeInsets.only(top: 10),
            child: const Center(
              child: Text(
                \"Phone (OTP) Authentication\",
                style:TextStyle(fontWeight: FontWeight.bold,fontSize: 20) ,
              ),
            ),
          ),

          SizedBox(height: 10,),

          SizedBox(
            width: 400,
            height: 50,
            child: CountryCodePicker(
              onChanged: (country){
                setState(() {
                  dialCodeDigits = country.dialCode!;
                });
              },
              initialSelection: \"IN\",
              showCountryOnly: false,
              showOnlyCountryWhenClosed: false,
              favorite: [\"+1\", \"US\", \"+91\", \"IND\"],
              hideSearch: true,
              showDropDownButton: false,
              enabled: false,
            ),
          ),

          Container(
            margin: EdgeInsets.only(top: 10,right: 10,left: 10),
            child: TextField(
              decoration: InputDecoration(
                  hintText: \"Phone Number\",
                  prefix: Padding(
                    padding: EdgeInsets.all(4),
                    child: Text(dialCodeDigits!),
                  )
              ),
              maxLength: 12,
              keyboardType: TextInputType.number,
              controller: _controller,
            ),
          ),

          Container(
            margin: EdgeInsets.all(15),
            width: double.infinity,
            child: ElevatedButton(
              onPressed: (){
                Navigator.of(context).push(MaterialPageRoute(builder: (c) => OTPControllerScreen(
                  phone: _controller.text,
                  codeDigits: dialCodeDigits!,
                )));
              },
              child: Text(\'Next\',style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),),
            ),
          ),

        ],
      ),
    )
  )

);

    标签: flutter flutter-layout


    【解决方案1】:

    使用resizeToAvoidBottomInset=true; 指定当键盘出现时正文是否应调整大小。 您还可以将父 Container() 包装为 SingleChildScrollView()

    【讨论】:

    • 不明白。请解释清楚或编辑我的代码
    【解决方案2】:

    你应该删除resizeToAvoidBottomInset: false,,这应该可以解决你的问题,而且你不应该这样做SizedBox(height: 500,),SizedBox( width: 400, height: 50,使用填充反而!

    【讨论】:

    • 你能编辑我的代码吗?
    • 嘿,只需从您的代码中删除 resizeToAvoidBottomInset: false,您的问题就会得到解决!
    • 太好了,现在您的手机文本框可以在点击它时向上移动,您也可以将此答案标记为正确答案,这样遇到像您这样的问题的人也可以得到正确答案!
    • 删除后面临同样的问题
    猜你喜欢
    • 2021-08-13
    • 2021-07-06
    • 2017-11-06
    • 2017-12-01
    • 2021-09-28
    • 2017-03-15
    • 2021-10-22
    • 2020-09-27
    • 2023-03-12
    相关资源
    最近更新 更多