安全区域 + AppBar/NestedScrollView 在 Flutter 中创建一个不需要的栏

Question

当我使用 NestedScrollView/SliverAppbar + 想要将 body 保留在安全区域时，它会自动在 AppBar 和 body 之间创建一个空的水平条（我制作了此条橙色的颜色在视觉上有助于解决问题）。有什么办法可以去掉这个栏，同时将 body 部分保留在安全区域内？谢谢！

代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({
    Key? key,
  }) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) => Scaffold(
        backgroundColor: Colors.orange,
        body: NestedScrollView(
          floatHeaderSlivers: true,
          headerSliverBuilder: (context, innerBoxIsScrolled) => [
            SliverAppBar(
              title:
                  Text('AppBar', style: const TextStyle(color: Colors.black)),
              backgroundColor: Color.fromARGB(255, 244, 243, 243),
            ),
          ],
          body: SafeArea(
            child: Container(
              color: Colors.blue,
              child: Text(
                'text',
                style: const TextStyle(color: Colors.black),
              ),
            ),
          ),
        ),
      );
}

Answer 1

从正文中删除 SafeArea，而是将整个 Scaffold 设置为 SafeArea[=25 的子项=]

您的代码应该是：

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { MyHomePage({ Key? key, }) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) => SafeArea( child: Scaffold( backgroundColor: Colors.orange, body: NestedScrollView( floatHeaderSlivers: true, headerSliverBuilder: (context, innerBoxIsScrolled) => [ SliverAppBar( title: Text('AppBar', style: const TextStyle(color: Colors.black)), backgroundColor: Color.fromARGB(255, 244, 243, 243), ), ], body: Container( color: Colors.blue, child: Text( 'text', style: const TextStyle(color: Colors.black), ), ), ), ), ); }

这会给你结果：

如果您想始终将状态栏图标设置为白色，

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( statusBarIconBrightness: Brightness.light, ));

安全区域 + AppBar/NestedScrollView 在 Flutter 中创建一个不需要的栏

Safe Area + AppBar/NestedScrollView creates an unwanted bar in Flutter

flutter

dart

flutter-appbar

sliverappbar