簡體   English   中英

鍵盤正在上面添加額外的填充

[英]Keyboard is adding extra padding above

當我啟動鍵盤(在iOS和Android上)時,我在其上方添加了額外的50 px填充,顯示空白區域。

這不是由存在多個Scaffold小部件的其他建議問題引起的。 我知道這是由我的布局引起的,我不確定它是否可以修復。

我有一個靜態導航欄,顯示在底部的應用程序中。 這是50像素高,坐在下面CupertinoApp 啟動鍵盤時,會添加額外的填充以填充此空間。 這個導航欄是一個Container小部件,其中InkWell鏈接直接打開視圖,有點像CupertinoTabScaffold,除了我沒有標簽,它只是推或替換當前導航項

添加resizeToAvoidBottomInset: false,不能用,因為這消除了滾動操作或不包括50像素所以內容是隱藏的。

僅在鍵盤處於活動狀態時才會出現此問題

CupertinoApp構建器

Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => Future<bool>.value(true),
      child: Column(
        children: <Widget>[
          Expanded(
            child: DefaultTextStyle(
                style: Fonts.defaultFontStyle(),
                child: CupertinoApp(
                  navigatorKey: navigatorKey,
                  routes: routes.builder,
                )),
          ),
          BottomBar(),
        ],
      ),
    );
  }

添加一個最小的例子來獲得更好的想法

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  final NAVIGATION_HEIGHT = 50.0;

  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  static const home = "/";
  static const about = "/about";
  static const products = "/products";

  Map<String, WidgetBuilder> builder = {
    home: (BuildContext context) => MyPage(),
    about: (BuildContext context) => MyPage(),
    products: (BuildContext context) => MyPage(),
  };

  Widget _createButtonsBuilder(int index) {
    String pageTitle = builder.keys.toList()[index].substring(1);
    if (pageTitle.length == 0) {
      pageTitle = "Home";
    }

    return Expanded(
      child: Material(
        color: Colors.black87,
        child: InkWell(
            onTap: () {
              navigatorKey.currentState.push(CupertinoPageRoute<void>(
                builder: (BuildContext context) => MyPage(
                      title: "$pageTitle",
                  navigationHeight: NAVIGATION_HEIGHT,
                    ),
              ));
            },
            child: Container(
              padding: EdgeInsets.all(10.0),
              height: NAVIGATION_HEIGHT,
              child: Text(
                "$pageTitle",
                style: TextStyle(
                    inherit: true, color: Colors.white, fontSize: 20.0),
                textAlign: TextAlign.center,
              ),
            )),
      ),
    );
  }

  Widget _BottomBar() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: List.generate(builder.keys.toList().length,
              (int i) => _createButtonsBuilder(i)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Container(
        color: Colors.white,
        child: Column(
          children: <Widget>[
            Expanded(
              child: CupertinoApp(
                title: 'Flutter Demo',
                routes: builder,
                navigatorKey: navigatorKey,
              ),
            ),
            _BottomBar()
          ],
        ),
      ),
    );
  }
}

class MyPage extends StatefulWidget {
  MyPage({Key key, this.title, this.navigationHeight}) : super(key: key);

  final String title;
  final double navigationHeight;

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

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(),
        child: Scrollbar(
          child: SingleChildScrollView(
            child: SafeArea(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '${widget.title}',
                  ),
                  SizedBox(height: 40.0),
                  Container(
                    margin: EdgeInsets.all(30.0),
                    child: CupertinoTextField(
                      placeholder: "Tap in here",
                    ),
                  ),
                  Container(
                      margin: EdgeInsets.all(30.0),
                      child: Text(
                          "When tapping to add focus to the above CupertinoTextField Widget the keyboard will appear as normal but because of the _BottomBar() outside the CupertinoApp the height (${widget.navigationHeight}px) is included in the padding above the keyboard")),
                  Container(
                      margin: EdgeInsets.all(30.0),
                      child: Text(
                          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum blandit diam sed faucibus. Donec ut enim in ante luctus sagittis. Donec vestibulum aliquet nunc, in efficitur erat molestie quis. In dictum aliquet neque. Vivamus pharetra nibh dictum urna sodales malesuada. Nunc porta condimentum mi, sed laoreet erat maximus vitae. Nunc luctus nisi urna, a luctus nisi consectetur quis. Sed rhoncus euismod nisl, in laoreet leo molestie sed. Suspendisse aliquet commodo dui, sit amet rhoncus sapien venenatis in. Nulla tempus libero diam, non cursus odio euismod at. Fusce nec ipsum ipsum. Mauris congue blandit risus, vitae pretium leo euismod id. Vivamus venenatis finibus diam id auctor. Donec vel urna finibus erat viverra bibendum. Vivamus sagittis eros id bibendum tristique. Nullam eleifend elit dapibus elit porttitor, ac egestas libero mollis.\n\nMorbi eleifend ligula sed leo placerat tristique. Mauris consequat fringilla maximus. Fusce pharetra ultrices risus, quis fermentum urna ultrices non. Vivamus suscipit nunc non ipsum ultrices laoreet. Etiam sed vestibulum eros, nec tempus neque. Vestibulum efficitur mauris ac ipsum aliquet, et tincidunt massa suscipit. Vivamus enim justo, viverra tempor purus eu, elementum tempor tortor. Sed rhoncus gravida sem, vitae molestie augue iaculis et. Donec augue ligula, interdum id interdum sit amet, condimentum in dolor. Donec dignissim erat lorem, ut accumsan felis porta id. Nunc lorem enim, maximus ut odio at, ultrices sodales velit."))
                ],
              ),
            ),
          ),
        ) // This trailing comma makes auto-formatting nicer for build methods.
        );
  }
}

我將我的CupertinoApp包裝在Scaffold小部件中,該小部件暴露了bottomNavigationBar

@override
  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () => Future<bool>.value(true),
        child: Scaffold(
          body: DefaultTextStyle(
                style: Fonts.defaultFontStyle(),
                child: CupertinoApp(
                  navigatorKey: navigatorKey,
                  routes: routes.builder,
                )),
          ),
          bottomNavigationBar: HomeBottomBar(),
        ));
  }

然后將resizeToAvoidBottomPadding = true添加到任何擁有CupertinoTextfield子項的CupertinoPageScaffold

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM