Question

我有一个带有条子和文本字段的屏幕，我在背景中绘制了一个渐变，没关系！但是，当我单击文本字段时，键盘会修改背景的大小。我该如何预防？

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [Colors.blue, Colors.white],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight),
            ),
          ),
          CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                floating: true,
                snap: true,
                backgroundColor: Colors.transparent,
                elevation: 0.0,
                flexibleSpace: FlexibleSpaceBar(
                    title: const Text("Test"), centerTitle: true),
              ),
              SliverToBoxAdapter(
                child: TextField(
                  decoration: InputDecoration(labelText: "Test Keyboard"),
                ),
              ),
              SliverToBoxAdapter(
                child: TextField(
                  decoration: InputDecoration(labelText: "Test Keyboard"),
                ),
              ),
              SliverToBoxAdapter(
                child: TextField(
                  decoration: InputDecoration(labelText: "Test Keyboard"),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

Answer 1

如果您仍然需要将 resizeToAvoidBottomPadding（或 resizeToAvoidBottomInset）属性设置为 true，例如为了避免使用键盘遮挡 TextFields，您可以使用如下解决方案以避免像你这样的渐变背景的缩小：

Container(
        height: screenHeight,
        decoration: getGradientDecoration(context), // your gradient decoration
        child: Scaffold(
              backgroundColor: Colors.transparent,
              resizeToAvoidBottomInset: true, 
              body: SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                  // your form body (text fields, ...)
                  ],
                ),
              ),
        )
)

这允许内部 Scaffold 调整其内容的大小，但由于具有渐变背景的 Container 位于 Scaffold 之外，因此不会调整大小并且渐变保持一致。

Answer 2

完成此操作的最快方法是使用固定大小的容器。使用媒体查询获取宽度和高度，然后将容器尺寸设置为这些尺寸。

var screenWidth = MediaQuery.of(context).size.width;
var screenHeight = MediaQuery.of(context).size.height;

Container(
  width: screenWidth,
  height: screenHeight,
  ...
)

Answer 3

我必须在脚手架中将属性resizeToAvoidBottomPadding设置为false。

Answer 4

您不能将CustomScrollView放置为容器的子级吗？

如何设置一个固定大小的渐变背景？

4 个答案: