Flutter App中的键盘相关

  ⋅   :391  ⋅   :0  ⋅   Flutter

(一)键盘遮挡问题

我们在某些页面,使用showModalBottomSheet方法时,如里里面包含TextField组件,比如修改购买的商品数量!

如下图:

代码如下:

void showSelectSku() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        List _skuSheet = [];
        AppConfig.goodsSkuJsonData.forEach((value) {
          _skuSheet.add(new GoodsSkuSheet(
              this._item['row']['id'], value['label'], value['data'],
              activeColor: value['activeColor']));
        });
        _skuSheet.add(new GoodsQuantity(this._item['row']['id']));
        return Stack(
              children: [
                new SingleChildScrollView(
                  child: new ConstrainedBox(
                    constraints: new BoxConstraints(
                      minHeight: 400.0,
                    ),
                    child: new Column(
                      children: _skuSheet,
                    ),
                  ),
                ),
                new Positioned(
                  bottom: 0.0,
                  left: 0.0,
                  right: 0.0,
                  child: new Container(
                    color: AppStyle.colorDeepOrange,
                    child: new FlatButton(
                      child: new Text(
                        '加入购物车',
                        textAlign: TextAlign.center,
                        style: new TextStyle(
                            color: AppStyle.colorWhite, fontSize: 18.0),
                      ),
                      onPressed: () {
                        // 关闭buttom sheet
                        Navigator.pop(context);
                        _addToCart();
                      },
                    ),
                  ),
                )
              ],
            );
      },
    );
  }

点击数量中的TextField组件,会弹出键盘,如果不做任何处理,弹出的Modal Bottom Sheet就会被键盘遮挡。

体验非常不好,解决办法!

在Statck外面嵌套一个AnimatedPadding

void showSelectSku() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        List _skuSheet = [];
        AppConfig.goodsSkuJsonData.forEach((value) {
          _skuSheet.add(new GoodsSkuSheet(
              this._item['row']['id'], value['label'], value['data'],
              activeColor: value['activeColor']));
        });
        _skuSheet.add(new GoodsQuantity(this._item['row']['id']));
        return new AnimatedPadding(
          padding: MediaQuery.of(context).viewInsets,
          duration: const Duration(milliseconds: 100),
          curve: Curves.decelerate,
          child: new Container(
            alignment: Alignment.bottomCenter,
            child: Stack(
              children: [
                new SingleChildScrollView(
                  child: new ConstrainedBox(
                    constraints: new BoxConstraints(
                      minHeight: 400.0,
                    ),
                    child: new Column(
                      children: _skuSheet,
                    ),
                  ),
                ),
                new Positioned(
                  bottom: 0.0,
                  left: 0.0,
                  right: 0.0,
                  child: new Container(
                    color: AppStyle.colorDeepOrange,
                    child: new FlatButton(
                      child: new Text(
                        '加入购物车',
                        textAlign: TextAlign.center,
                        style: new TextStyle(
                            color: AppStyle.colorWhite, fontSize: 18.0),
                      ),
                      onPressed: () {
                        // 关闭buttom sheet
                        Navigator.pop(context);
                        _addToCart();
                      },
                    ),
                  ),
                )
              ],
            ),
          ),
        );
      },
    );
  }

修改后,如下图

(二)键盘无法关闭

如下图,键盘把下面的bottom nav bar 遮挡了,键盘上还没有完成的按钮,我没办法做任何操作!

要解决这个问题,我们就需要一个package

https://pub.dartlang.org/packages/keyboard_actions

标签:flutter keyboard

如需评论,请填写表单。
换一个

记住我的信息