Question

替代标题：如何在选择文本字段时仅调整一些容器的大小？

我有一个登录屏幕，该屏幕由身体中的Stack桩组成，它有3个容器，一个包含背景图像，一个带有徽标，然后是该容器，其中包含用户名和登录按钮，我希望当用户触摸用户名或密码文本字段的文本字段时，它会像往常一样重新排序，但这是问题所在：

当我尝试该应用程序时，背景也会调整大小，并且我希望它和徽标保持不变，这两个尺寸完全没有变化，因此我必须测试功能“ resizeToAvoidBottomInset：false”以不调整它的大小，并且有效！包括文本字段在内的所有内容...因此，现在我需要一种不更改背景和徽标大小的方法，但同时要调整文本字段容器的大小，以便当用户点击其中一些文本框时，它们可以在键盘上方是可见的，另一种方式是使textfields容器的边距发生变化，以覆盖图像的所有屏幕显示。

Main.dart

import 'package:flutter/material.dart';
import 'package:apes/login/login_page.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    return new MaterialApp(
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: new LoginPage(),
    );
  }
}

login_page.dart

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {

TextEditingController usernameEditingController = TextEditingController();
TextEditingController passwordEditingController = TextEditingController();

String msg='';

  @override

  Widget build(BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.center,
      children: <Widget>[
        Container( //background_image
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/background/Fondo_ancho2.jpg'),
              fit: BoxFit.cover,
            )
          ),
        ),
        Container( //logo_image
          margin: new EdgeInsets.symmetric(vertical: 50, horizontal: 50),
          width: 160,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/Logo1.jpg'),
              fit: BoxFit.contain,
              alignment: Alignment.topCenter
            )
          ),
        ),
        Container( //textfields_box
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.only(top: 250),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(topRight: Radius.circular(20), topLeft: Radius.circular(20)),
            color: Colors.white,
          ),
          child: Padding(
            padding: EdgeInsets.all(25),
            child: ListView(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.fromLTRB(0, 20, 0, 20),
                  child: Container(
                    color: Color(0xfff5f5f5),
                    child: TextFormField(
                      controller: usernameEditingController,
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'SFUIDisplay'
                      ),
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Usuario',
                        prefixIcon: Icon(Icons.person_outline),
                        labelStyle: TextStyle(
                          fontSize: 15
                        )
                      ),
                    ),
                  ),
                ),
                Container(
                  color: Color(0xfff5f5f5),
                  child: TextFormField(
                    controller: passwordEditingController,
                    obscureText: true,
                    style: TextStyle(
                      color: Colors.black,
                      fontFamily: 'SFUIDisplay'
                    ),
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Contraseña',
                      prefixIcon: Icon(Icons.lock_outline),
                      labelStyle: TextStyle(
                          fontSize: 15
                      )
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: MaterialButton(
                    onPressed: () async {}, //Login-Button
                    child: Text('INGRESAR',
                    style: TextStyle(
                      fontSize: 15,
                      fontFamily: 'SFUIDisplay',
                      fontWeight: FontWeight.bold,
                    ),
                    ),
                    color: Color(0xffff2d55),
                    elevation: 0,
                    minWidth: 400,
                    height: 50,
                    textColor: Colors.white,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

图片：

Normal screen

Screen with keyboard

Answer 1

根据我在您的图像中看到的，我的建议是将图像放在支架中，这样在显示键盘时就无法调整图像的大小，我从我的项目中得到了一些示例，该示例与您的示例几乎相似案例，所以我将在我的项目中举一些例子。在 header_image.dart 类中：

class HeaderImage extends AnimatedWidget {
  const HeaderImage({this.logoAnim, this.backgroundOpaAnim, this.controller})
      : super(listenable: controller);

  final Animation<double> logoAnim, backgroundOpaAnim, controller;

  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: backgroundOpaAnim.value,
      child: Container(
          decoration: AppBoxDecorations().loginBackground,
          child: Center(
            child: Transform(
                alignment: Alignment.center,
                transform:
                    Matrix4.diagonal3Values(logoAnim.value, logoAnim.value, 1),
                child: Image(
                    image: ExactAssetImage(AppAssets.logo),
                    fit: BoxFit.fill,
                    width: Constant.loginImageWidth,
                    height: Constant.loginImageHeight)),
          )),
    );
  }
}

和 someclass.dart ：

Scaffold(
              appBar: PreferredSize(
                  child: Container(
                      decoration: AppBoxDecorations().switchImageBackground,
                      child: HeaderImage(
                          logoAnim: logoAnim,
                          backgroundOpaAnim: backgroundOpaAnim,
                          controller: controller)),
                  preferredSize: Size.fromHeight(
                      orientation == Orientation.landscape
                          ? Constant.screenHeightCustomFifteenth
                          : Constant.backgroundSwitcherHeight)),
              ....,
              body: BodyContainer(),
            )

希望这可以为您遇到的问题提供一些启发，祝您好运！

如何不调整堆栈上的背景图像大小（抖动）

1 个答案: