Поделиться размерами между виджетами - PullRequest
Новая
       10

Поделиться размерами между виджетами

0 голосов
/ 07 января 2019

В Flutter мы можем использовать Themes для обмена цветами и стилями шрифтов. https://flutter.io/docs/cookbook/design/themes

Существует ли существующая наилучшая практика, которую мы можем использовать аналогичным образом, чтобы разделить значения, такие как поля, отступы и ширины или высоты?

Предпочтительно что-то, что помогает придерживаться руководящих принципов проектирования материалов.

1 Ответ

0 голосов
/ 07 января 2019

Определение пользовательских виджетов

Самый простой и, вероятно, самый элегантный подход - определить пользовательские виджеты, например MyRaisedButton, который внутренне использует RaisedButton с правильными размерами. 

class MyRaisedButton extends StatelessWidget {
  MyRaisedButton({
    this.child,
    this.onPressed,
  });

  final Widget child;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      padding: ...,
      onPressed: onPressed,
      child: child
    );
  }
}

В большинстве случаев это работает на удивление хорошо. Однако, если вы все еще хотите сохранить гибкость своих виджетов (возможность передавать множество параметров настройки конструктору), ваше общее определение виджета быстро становится очень длинным, потому что вам нужно перенаправить все параметры в RaisedButton. В этом случае имеет смысл на самом деле делиться значениями в приложении.

Фактическое распределение значений по всему приложению

Конечно, такой подход тоже возможен. Благодаря открытости Flutter, мы можем просто посмотреть на , как реализован Theme , и скопировать этот код, чтобы создать собственный виджет, который функционирует так же, как Theme. Вот урезанная версия: 

@immutable
class MyThemeData {
  MyThemeData({
    this.myPadding,
    this.myColor,
    this.myString
  });

  final Padding myPadding;
  final Color myColor;
  final String myString;
}

class MyTheme extends StatelessWidget {
  MyTheme({
    Key key,
    @required this.data,
    @required this.child
  }) : super(key: key);

  final MyThemeData data;
  final Widget child;

  static MyThemeData of(BuildContext context) {
    return (context.ancestorWidgetOfExactType(MyTheme) as MyTheme)?.data;
  }

  @override
  Widget build(BuildContext context) => child;
}

Теперь вы можете просто обернуть MaterialApp в MyTheme виджет: 

MyTheme(
  data: MyThemeData(
    myPadding: ...,
    myColor: ...,
    ...
  ),
  child: ... (here goes the MaterialApp)
)

Тогда в любом месте вашего приложения вы можете написать MyTheme.of(context).myPadding.
Вы можете адаптировать класс MyThemeData к вашим потребностям, сохраняя все, что вы хотите.

...