Question

我有一个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', style: TextStyle(fontFamily: kFontFamily)),
          ),

          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            title: Text('Me', style: TextStyle(fontFamily: kFontFamily)),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.assignment),
            title: Text('Stories', style: TextStyle(fontFamily: kFontFamily)),
          ),
//with badge
          BottomNavigationBarItem(
            icon: Badge(
                showBadge: Provider.of<Data>(context).basketCounter == '0'
                    ? false
                    : true,
                badgeContent: Text(
                  Provider.of<Data>(context).basketCounter,
                  style: TextStyle(color: kColorText),
                ),
                child: Icon(Icons.shopping_cart)),
            title: Text('Basket', style: TextStyle(fontFamily: kFontFamily)),
          ), 
        ],
              ),
      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',
      style: kSendButtonTextStyle,
      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()
      ),
    );
  }
}

Answer 1

最佳解决方案是创建一个带有两个子元素的 Stack widget：一个 Container 用于背景（颜色、渐变、背景图像...）和一个 Scaffold 用于应用内容。< /p>

  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 ... */))
      )
    ]);
  }

Answer 2

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

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

Answer 3

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

resizeToAvoidBottomPadding: false

Answer 4

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

   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 ... */)
  )

Answer 5

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

resizeToAvoidBottomInset: false,

Answer 6

你可以使用

child: Scaffold(
        backgroundColor: Color(0xff53ccb2),

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

6 个答案: