SafeArea AppBar/NestedScrollView在Flutter中創建不需要的bar-有解無憂

當我使用 NestedScrollView/SliverAppbar 希望將正文保持在安全區域中時，它會自動在 AppBar 和正文之間創建一個空的水平條（我將此條的顏色設為橙色以在視覺上幫助解決問題）。有沒有辦法可以擺脫這個欄并同時將身體部分保持在安全區域內？謝謝！

下面的代碼：

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),
              ),
            ),
          ),
        ),
      );
}

Safe Area AppBar/NestedScrollView 在 Flutter 中創建不需要的 bar

uj5u.com熱心網友回復：

從正文中移除SafeArea，而是將整個Scaffold設定為SafeArea的子項

您的代碼應該是：

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),
          ),
        ),
      ),
    ),
  );
}

這會給你結果： Safe Area AppBar/NestedScrollView 在 Flutter 中創建不需要的 bar

如果您想始終將狀態欄圖示設定為白色，

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/480533.html

標籤：扑镖颤振应用栏 sliverappbar

上一篇：為什么我不能在文本小部件顫動中使用變數

下一篇：（GOROUTER發現的例外）斷言失敗：第299行pos13：'！redirects.contains（redir）'：檢測到重定向回圈：