Flutter App中的键盘相关

  ⋅   :126  ⋅   :1  ⋅   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

1 comments
  1. SteveFus

    &lt;a href=https://sexosochi.vip/proverennie/&gt;Проститутки сочи&lt;/a&gt; <br /> &lt;a href=https://sexosochi.center&gt;проститутки сочи&lt;/a&gt; <br /> &lt;a href=https://sex.sochi-xxx.net&gt;проститутки сочи&lt;/a&gt; <br /> &lt;a href=https://sexonsk.online/low-cost/&gt;проститутки новосибирска&lt;/a&gt; <br /> &lt;a href=http://now.sibirki.com/now.html&gt;Проститутки новосибирска&lt;/a&gt; <br /> &lt;a href=https://nsksex.vip&gt;Проститутки сочи&lt;/a&gt; <br /> &lt;a href=https://sexosurgut.mobi&gt;Проститутки сургут&lt;/a&gt; <br /> &lt;a href=http://prostitutkisurguta.xyz&gt;проститутки сургут&lt;/a&gt; <br /> &lt;a href=https://surgut.love&gt;проститутки сургут&lt;/a&gt; <br /> Проститутки Удобный поиск. Реальные фото девушек без обмана. Крупнейшая база - более 2000 анкет, каждый найдет себе проститутку. ... Здравствуйте! Вас приветствует команда сайта Сибирки, сайта, на котором размещают анкеты 86% всех проституток города Новосибирска. У нас вы найдете услуги лучших девушек от недорогих путан до элитных моделей, готовых к любым вашим желаниям. <br /> Многие мужчины предпочитают платную любовь мимолетным отношениям , если вы проездом в Новосибирске и просто хотите расслабиться, то зачем вам лишние сложности? Например в командировке часто просто некогда тратить время на ухаживания и знакомства с женщинами в традиционных местах, кроме того, такой роман может нести за собой последствия, так как дама может пожелать продолжить отношения. Так же многие мужчины не считают секс с проституткой настоящей изменой, ведь они платят именно за секс, и ничего больше. Если хочется разнообразия в половой жизни, сексуальной разрядки и новых ощущений – не лучше ли воспользоваться интимными услугами проститутки, чем искать романы на стороне?

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

记住我的信息