颤振:激活键盘后如何删除键盘后面的白色背景

我有一个Flutter应用,当我的iPhone中激活键盘时,我确实遇到了奇怪的行为。从下面的图片中可以看到,弹出时键盘下方会出现白色背景... 有人知道如何设置背景颜色吗?

颤振:激活键盘后如何删除键盘后面的白色背景

编辑: 感谢您使用resizeToAvoidBottomPadding的建议。该命令已弃用,我已替换为resizeToAvoidBottomInset: false。这已解决了该问题(是!),并且键盘下没有更多的白色背景,但是它产生了另一个奇怪的效果。现在,键盘上方有一个深蓝色的条。检查下一张图片...我设置了橙色背景色,以便可以更好地看到它。您还可以看到浮动按钮向上移动,这意味着暗蓝条现在位于键盘和支架之间。你知道我怎么摆脱那个酒吧吗?这似乎是最糟糕的事情,因为白色背景占用了宝贵的屏幕空间。

作为参考,脚手架嵌套在CupertinoTabScaffold中

颤振:激活键盘后如何删除键盘后面的白色背景

这是我代码中最相关的部分

void main() async {
  Crashlytics.instance.enableInDevMode = true;

  FlutterError.onError = Crashlytics.instance.recordFlutterError;

  runApp(ChangeNotifierProvider<Data>(
    builder: (context) => Data(),child: new CupertinoApp(

      theme: CupertinoThemeData(
        barBackgroundColor: kColorPrimary,primaryColor:
            kColorText,textTheme: CupertinoTextThemeData(
          primaryColor:
              kColorText,navLargeTitleTextStyle: TextStyle(
              fontWeight: FontWeight.bold,fontSize: 70.0,color: kColorText),),home: new CheckIfFirstTime(),));
}

class CheckIfFirstTime extends StatefulWidget {
  @override
  _CheckIfFirstTimeState createState() => _CheckIfFirstTimeState();
}

class _CheckIfFirstTimeState extends State<CheckIfFirstTime> {
  Future checkFirstSeen() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool _seen = (prefs.getBool('seen') ?? false);

    if (_seen) {
      Navigator.of(context).pushReplacement(
          new MaterialPageRoute(builder: (context) => new HomeScreen()));
    } 
  }

  @override
  void initState() {
    super.initState();
    checkFirstSeen();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kColorPrimary,body: Text(
        'loading...',style: kSendButtonTextStyle,);
  }
}



class HomeScreen extends StatefulWidget {
  static const String id = 'home';

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

class _HomeScreenState extends State<HomeScreen> {
  int currentIndex = 0;

  void confirmPlatform() {
    if (Platform.isIOS)
      appData.isIOS = true;
    else
      appData.isIOS = false;
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    confirmPlatform();

  }


  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      resizeToAvoidBottomInset: false,tabBar: CupertinoTabBar(
        backgroundColor: kColorPrimaryLight,items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.search),title: Text('Discover',style: TextStyle(fontFamily: kFontFamily)),BottomNavigationBarItem(
            icon: Badge(
                showBadge: Provider.of<Data>(context).filterCounter == 0
                    ? false
                    : true,badgeContent: Text(
                  Provider.of<Data>(context).filterCounter.toString(),style: TextStyle(color: kColorText),child: Icon(Icons.filter_list)),title: Text('Filters',BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),title: Text('Me',BottomNavigationBarItem(
            icon: Icon(Icons.assignment),title: Text('Stories',//with badge
          BottomNavigationBarItem(
            icon: Badge(
                showBadge: Provider.of<Data>(context).basketCounter == '0'
                    ? false
                    : true,badgeContent: Text(
                  Provider.of<Data>(context).basketCounter,child: Icon(Icons.shopping_cart)),title: Text('Basket',],tabBuilder: (context,index) {
        if (index == 0) {
          return CupertinoTabView(
            navigatorKey: firstTabNavKey,builder: (BuildContext context) => DiscoverScreenFinal(),);

        } else if (index == 1) {
          return CupertinoTabView(
            navigatorKey: secondTabNavKey,builder: (BuildContext context) => FilterScreen(),);
        } else if (index == 2) {
          return CupertinoTabView(
            navigatorKey: thirdTabNavKey,builder: (BuildContext context) => WelcomeScreen(),);
        } else if (index == 3) {
          return CupertinoTabView(
            navigatorKey: forthTabNavKey,builder: (BuildContext context) => Stories(),);
        }
        {
          return CupertinoTabView(
            navigatorKey: fifthTabNavKey,builder: (BuildContext context) => Basket(),);
        }
      },);
  }
}


class DiscoverScreenFinal extends StatefulWidget {
  @override
  _DiscoverScreenFinalState createState() => _DiscoverScreenFinalState();
}

class _DiscoverScreenFinalState extends State<DiscoverScreenFinal> {

  @override
  Widget build(BuildContext context) {
    return TopBarAgnostic(
      text: 'Discover',firstIcon: Icon(Icons.blur_on),firstIconDestination: CameraApp(),scannerOn: true,secondtIcon: Icon(Icons.location_on),secondIconDestination: MapPage(),uniqueHeroTag: 'discover001a',child: Scaffold(
        resizeToAvoidBottomInset: false,backgroundColor: kColorPrimary,floatingactionButtonLocation: FloatingactionButtonLocation.endFloat,floatingactionButton: FloatingactionButton.extended(
          backgroundColor: kColoraccent,onpressed: () {
            //…
          },label: Text(
            'To Favorites',style: kDescriptionTextStyle.copyWith(
                fontSize: kFontSizeSmall,fontWeight: FontWeight.bold),icon: Icon(Icons.favorite),body: Container()
      ),);
  }
}
wkz123456 回答:颤振:激活键盘后如何删除键盘后面的白色背景

最佳解决方案是创建一个带有两个子元素的 Stack widget:一个 Container 用于背景(颜色、渐变、背景图像...)和一个 Scaffold 用于应用内容。

  Widget build(BuildContext context) {
    return Stack(
        children: [
      Container(
        decoration:  /* ... Background styles ... */,),Scaffold(
          extendBodyBehindAppBar: true,appBar: AppBar(backgroundColor: Colors.transparent,elevation: 0),body: Container(
              padding: const EdgeInsets.only(top: 16,left: 16,right: 16),child: SafeArea(bottom: false,child: /* ... App content ... */))
      )
    ]);
  }
,

您可以将backgroundColor设置为Scaffold,以替换该白色背景。

之所以会发生这种情况,是因为打开键盘时Scaffold的主体会被调整大小。如果要避免调整大小,可以将resizeToAvoidBottomInset: false设置为Scaffold

,

您必须在Scaffold中使用此行,当键盘出现或消失时,它将自动调整视图。

resizeToAvoidBottomPadding: false
,

基本上,您可以通过将脚手架保持在容器中来解决此问题,如下所示:

   Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topRight,end: Alignment(0.5,0.3),colors: [
          Colors.red,Colors.green,],child: Scaffold(/* ... rest of your code ... */)
  )
,

在 flutter 2 之后,在 Scaffold 中使用它

resizeToAvoidBottomInset: false,
,

你可以使用

child: Scaffold(
        backgroundColor: Color(0xff53ccb2),
本文链接:https://www.f2er.com/3169907.html

大家都在问