Адаптивный дизайн: динамическое изменение столбца на ряд, если экран больше - PullRequest
Новая
       15

Адаптивный дизайн: динамическое изменение столбца на ряд, если экран больше

1 голос
/ 18 мая 2019

Как динамически изменить виджет «Столбец» на виджет «Строка», если ширина экрана устройства превышает определенный порог?

В этом случае пользователь может использовать приложение на планшете или в альбомной ориентации,расположение должно отличаться, чтобы оптимизировать использование доступной ширины.

В CSS flexbox это так же просто, как изменить класс с flex-row на flex-column, но во Flutter используются виджеты.

Ответы [ 2 ]

4 голосов
/ 18 мая 2019

Row и Column имеют общего родителя с именем Flex, который принимает направление оси.Просто изменив значение direction, вы можете изменить Flex на строку или столбец.

Чтобы получить ширину экрана, вы можете использовать MediaQuery.of(context).size.width.

Ваш виджет должен выглядеть так: 

@override
Widget build(BuildContext context) {
  bool isScreenWide = MediaQuery.of(context).size.width >= kMinWidthOfLargeScreen;

  return Scaffold(
    body: Flex(
      direction: isScreenWide ? Axis.horizontal : Axis.vertical,
      children: <Widget>[
        ...
      ],
    )
  );
}
0 голосов
/ 24 мая 2019

Чтобы изменить в зависимости от ориентации устройства, вы можете сделать: 

Orientation orientation = MediaQuery.of(context).orientation;

return orientation == Orientation.portrait
? Column(children: <Widget>[])
: Row(children: <Widget>[]);

Я написал помощник для этого (от столбца к строке).

import 'package:flutter/material.dart';

class OrientationSwitcher extends StatelessWidget {
  final List<Widget> children;

  const OrientationSwitcher({Key key, this.children}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Orientation orientation = MediaQuery.of(context).orientation;
    return orientation == Orientation.portrait
    ? Column(children: children)
    : Row(children: children);
  }
}

И для его использования ... 

  Widget build(BuildContext context) {
    return OrientationSwitcher(
      children: <Widget>[
           // place children here like its a column or row.
        ]
    )
  }

Вы также можете сделать это с помощью Flex () или любого другого виджета.

Кроме того, есть и другиекроме ориентации, доступны опции, не забудьте взглянуть на реализацию MediaQuery.of (context) в документации Flutter.

...