我有一個展示 Flutter 應用程式渲染的小部件。如下所示，文本在navigationBar. 但是，如果您將 注釋掉backgroundColor，它就會變得不可見。這是為什么？
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text("Settings"),
previousPageTitle: "Back",
backgroundColor: Colors.blue,
),
child: Column(
children: const <Widget>[
Text("Hello World!"),
],
),
),
);
}
}
沒有藍色：
藍色：
uj5u.com熱心網友回復：
高度不會隨著 的變化而變化backgroundColor，這就是CupertinoPageScaffold 的檔案所說的：
當內容是半透明時，它們可以在導航欄下滑動。在這種情況下，孩子的 BuildContext 的 MediaQuery 將有一個頂部填充，指示與導航欄重疊的區域。
這就是為什么你的文本被隱藏的原因，當它的顏色是半透明的時候，它只是在欄下面。通過使用Colors.blue，您將獲得不透明的顏色。
你可以試試用backgroundColor: Colors.transparent，結果會和不放顏色一樣。
要解決此問題，您可以Column使用SafeArea小部件包裝您的：
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text("Settings"),
previousPageTitle: "Back",
),
child: SafeArea(
child: Column(
children: const <Widget>[
Text("Hello World!"),
],
),
),
),
);
}
}
在 DartPad 上嘗試完整的示例
uj5u.com熱心網友回復：
@GuillaumeRoux 已經澄清了原因。SafeArea如果需要半透明顏色，您可以修復它。
CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text("Settings"),
previousPageTitle: "Back",
),
child: SafeArea(
child: Column(
children: const <Widget>[
Text("Hello World!"),
],
)
),
),
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/445222.html
上一篇：如何在顫動中停止重復洛蒂影片