Как узнать ориентацию портретная или альбомная во Flutter
if(portrait){
return ListView.builder()
}else{
return GridView.count()
}
Как узнать ориентацию портретная или альбомная во Flutter
if(portrait){
return ListView.builder()
}else{
return GridView.count()
}
Чтобы определить ориентацию экрана, мы можем использовать виджет OrientationBuilder
. OrientationBuilder определит текущую ориентацию и перестроит ее при изменении ориентации.
new OrientationBuilder(
builder: (context, orientation) {
return new GridView.count(
// Create a grid with 2 columns in portrait mode, or 3 columns in
// landscape mode.
crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
);
},
);
вы можете найти полный пример здесь: https://flutter.io/cookbook/design/orientation/ а>
Вы можете использовать MediaQuery
для проверки ориентации:
var isPortrait = MediaQuery.of(context).orientation == Orientation.portrait
build
или didChangeDependencies
- person Günter Zöchbauer; 12.06.2018
build
, а затем передал его в мой виджет. Спасибо, теперь он отлично работает.
- person Adarsh Vijayan P; 12.06.2018
это довольно просто
if (MediaQuery.of(context).orientation == Orientation.portrait){
// is portrait
}else{
// is landscape
}
Для полноты картины я хотел бы добавить еще один способ определения ориентации во Flutter. В ответах уже упоминались два способа обнаружения. Они есть
Есть третий способ, с которым я столкнулся при изучении Flutter из видео (переходите к минуте 2:34) от инженеров Google. Это называется Layout Builder
. Вот короткий фрагмент:
return Padding(
padding: _padding,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if(constraints.maxHeight > constraints.maxWidth) {
return _getPortraitLayout();
}
else {
return _getLandscapeLayout();
}
},
),
);
Mediaquery нельзя использовать в initState()
, а OrientationBuilder нужен виджет, поэтому я создал следующий класс, который можно использовать в любом месте проекта.
if(IsPortrait.isPortrait){
}else{
}
class IsPortrait{
static bool isPortrait = true;
void init(BoxConstraints constraints, Orientation orientation) {
if (orientation == Orientation.portrait) {
isPortrait = true;
}
else{
isPortrait = false;
}
}
}
следующие функции можно использовать для изменения ориентации
Только портретный режим
/// blocks rotation; sets orientation to: portrait
void _portraitModeOnly() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
}
Только альбомный режим
/// blocks rotation; sets orientation to: landscape
void _landscapeModeOnly() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
}
Включить портретную ориентацию и пейзажный пейзаж
void _enableRotation() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
}
Мой вариант.
1) В глобальной области установите глобальный ValueNotifier:
final ValueNotifier<bool> IS_PORTRAIT = ValueNotifier<bool>(true);
2) В области действия скаффолда измените значение нашего глобального ValueNotifier
return Scaffold(
key: scaffoldKey,
body: OrientationBuilder(
builder: (BuildContext context, Orientation orientation) {
IS_PORTRAIT.value = orientation == Orientation.portrait;
return MyBody();
},
),
);
3) Где угодно слушать текущую ориентацию
return ValueListenableBuilder(
valueListenable: IS_PORTRAIT,
builder: (BuildContext context, value, Widget child) {
return Container(
color: Colors.green[100],
child: Container(),
height: (IS_PORTRAIT.value)? 150: 80,
);
},
);