如何根據應用程式的方向來改變狀態欄和導航欄的顏色,例如:
。
- 當方向設定為縱向時,將
狀態欄和導航顏色設定為粉紅色。 - 當方向設定為橫向時,將狀態欄和導航顏色設定為 "黃色"。當應用程式的方向被設定為橫向時,將
AppBar標題改為 "LANDSCAPE"。當應用程式的方向設定為縱向時,也將AppBar標題改為 "PORTRAIT"。
uj5u.com熱心網友回復:
你試過 layoutBuilder 嗎?
LayoutBuilder(
builder:(context,constraint){
if(constraint.maxWidth < 600){
//Your thing to do here when goes to portrait。
}else{
//當轉到景觀時,你要在這里做的事情。
}
/or you can change on the if function to DiviceOrietation.portait or landcape }
}
);
uj5u.com熱心網友回復:
使用OrientationBuilder來監聽方向的變化
。
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: color, systemNavigationBarColor: color));來應用顏色
請看完整的例子:
import 'package:flutter/material.dart'/span>。
import 'package:flutter/services.dart';
void main() => runApp(MyApp() );
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) => MaterialApp(home: Home())。
}
class Home extends StatelessWidget{
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: OrientationBuilder()
builder: (context, orientation) {
_updateStatusBarColor(orientation);
//你的布局return Container()。
},
),
);
}
void _updateStatusBarColor(orientation) {
WidgetsBinding.instance!.addPostFrameCallback((_) {
final color = orientation == Orientation.portrait ? Colors.pink 。Colors.yellow;
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: color, systemNavigationBarColor: color)) 。
});
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/309231.html
標籤:
上一篇:關于底部溢位資訊的解釋

