Question

我的问题是：当我滚动带有TextFormFields的页面并单击它们之一时，键盘会越过它们。我只有一个解决方案：增大底部填充，以至于不再覆盖该字段，但这使布局难看，因为现在我在屏幕上有很大一部分，没有任何用处。

对此的广受好评的响应是：“使用MediaQuery.of（context）.viewInsets.bottom”

但这没用。

在脚手架中将resizeToAvoidBottomPadding设置为true无效。

用SingleChildScrollView包装小部件也不起作用。

在我使用它的两种情况下都会发生这种情况：在脚手架下和在showModalBottomSheet（）下。还有其他解决方案吗？

编辑：如果代码确实有什么不同，则为：

return Scaffold(
      drawer: CustomDrawer(),
      appBar: CustomAppBar(
        title: widget.school != null ? 'a' : 'b',
        hasBackButton: true,
      ),
      body: BackgroundCard(
        padding: const EdgeInsets.all(24.0),
        child: Padding(
          padding:
              EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Form(
                key: _formKey,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    CustomTextFormField(
                      title: 'CNPJ:',
                      controller: _controllers[0],
                    ),
           ...

这是背景卡：

class BackgroundCard extends StatefulWidget {
  BackgroundCard({
    @required this.child,
    this.padding,
    this.bottomPadding = 0,
    this.filterAction,
    this.addAction,
    this.addTitle,
    this.tileCount = 0,
  });
  final Widget child;
  final EdgeInsets padding;
  final double bottomPadding;
  final String addTitle;
  final VoidCallback addAction;
  final VoidCallback filterAction;
  final int tileCount;

  @override
  _BackgroundCardState createState() => _BackgroundCardState();
}

class _BackgroundCardState extends State<BackgroundCard> {
  @override
  Widget build(BuildContext context) {
    bool hasTopButton =
        widget.addAction != null || widget.filterAction != null ? true : false;

    return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.fromLTRB(
          16.0,
          24.0 - (hasTopButton ? 12 : 0),
          16.0,
          48.0,
        ),
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                if (widget.filterAction != null)
                  OutlineButton(
                    borderSide: BorderSide(color: kYellow, width: 1.6),
                    onPressed: () => widget.filterAction(),
                    child: Row(
                      children: <Widget>[
                        Icon(Icons.search, color: kYellow),
                        SizedBox(width: 12.0),
                        Text(
                          'Filter',
                          style: Theme.of(context)
                              .textTheme
                              .headline5
                              .apply(color: kYellow),
                        ),
                      ],
                    ),
                  ),
                Spacer(),
                if (widget.addAction != null)
                  RaisedButton(
                    onPressed: () => widget.addAction(),
                    color: kYellow,
                    child: Text(
                      widget.addTitle ?? '',
                      style: Theme.of(context)
                          .textTheme
                          .headline5
                          .apply(color: kWhite),
                    ),
                  ),
              ],
            ),
            hasTopButton ? SizedBox(height: 12.0) : Container(),
            Container(
              padding: widget.padding ?? const EdgeInsets.all(0),
              decoration: BoxDecoration(
                color: kWhite,
                borderRadius: BorderRadius.circular(12.0),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.16),
                    blurRadius: 4,
                    offset: Offset(0, 1),
                  ),
                ],
              ),
              child: widget.child,
            ),
          ],
        ),
      ),
    );
  }
}

Edit2：所以我认为问题很可能与我使用的插件有关：persistent_bottom_nav_bar。因此，我想这里的任何答案都无法解决我的问题。我会给一些最好的答案。

Answer 1

这里的技巧是在要使用的ListView上使用 reverse参数。

为了不从表格的末尾开始，仅在键盘弹起时使其反转也很有用，为此，我个人使用了 keyboard_visibility 包。

这是一个可行的示例：

ngOnInit() {
this.mainService.enableBtn.subscribe(message=> {
alert(message)
    })
  }
}

Answer 2

我有一个类似的问题。似乎与viewInsets.bottom相关的未更新（即使显示键盘也始终为0）。这是我的代码段：

奇怪的是，当我从一个旧项目中运行它时，同样的代码也可以正常工作。我打开的错误是this。

键盘不断覆盖Flutter中的文本字段

2 个答案: