Блог

Я пытаюсь создать макет, подобный этому:

Класс макета, который я пытаюсь создать, выглядит следующим образом:

 class Layout extends StatefulWidget {
  @required
  final String title;
  @required
  final Widget leftView;
  @required
  final Widget rightView;

  const Layout({Key key, this.title, this.leftView, this.rightView})
      : super(key: key);

  @override
  _LayoutState createState() => _LayoutState();
}

class _LayoutState extends State<Layout> {
  String title;
  Widget leftView;
  Widget rightView;

  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      drawer: (screenSize.width < Constants.MOBILE_WIDTH_SIZE
          ? DrawerPage()
          : null),
      //TODO: Need to be able to change based on some global variable as comments section can't have something else down there
      floatingActionButtonLocation:
          screenSize.width < Constants.DESKTOP_WIDTH_SIZE
              ? FloatingActionButtonLocation.miniEndFloat
              : FloatingActionButtonLocation.miniCenterFloat,
      body: getRelevantLayout(screenSize.width, screenSize.height),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add your onPressed code here!
        },
        child: const Icon(Icons.add),
        //backgroundColor: Colors.orangeAccent,
      ),
    );
  }

  Widget getRelevantLayout(double _width, double _height) {
    if (_width < Constants.MOBILE_WIDTH_SIZE) {
      // mobile Layout
      return leftView;
    } else if (_width < Constants.DESKTOP_WIDTH_SIZE) {
      // tablet layout
      return Row(
        children: [
          DrawerPage(),
          Expanded(
            child: leftView,
          ),
        ],
      );
    } else {
      // desktop layout
      return Row(
        children: [
          DrawerPage(),
          Flexible(flex: 9, child: leftView),
          Flexible(flex: 10, child: rightView),
        ],
      );
    }
  }

  @override
  void initState() {
    title = widget.title;
    leftView = widget.leftView;
    rightView = widget.rightView;
    super.initState();
  }
}
  

Идея, которую я пытался реализовать, заключается в том, что в моих оригинальных маршрутах настраиваются мои представления, т. е

       routes: {
        '/': (context) => Layout(
              title: '$_title - Home',
              leftView: ListSectionView(),
              rightView: WhatsNewView(),
            ),
  

Затем моя идея заключалась в том, чтобы, скажем, в leftview настроить rightView, хотя очевидно, что если leftview не настроен снова, это не сработает. Я хочу использовать обычную навигацию, только когда она отображается на планшете или телефоне.нажмите

Я изо всех сил старался найти подобное решение, но безрезультатно. Итак, любые предложения о том, как этого можно достичь, были бы высоко оценены.

Мне нравится создавать целое дерево виджетов для каждой ориентации в отдельном виджете и выбирать, какой из них использовать, в зависимости от ширины экрана и ориентации. Я использую константы для размеров экрана и функций, когда хочу изменить размер только нескольких компонентов. Пример:

 const double smallScreenWidth = 360.0;
const double mediumScreenWidth = 412.0;
const double bigScreenWidth = 480.0;

double iconSize(BuildContext context) {
  double screenWidth = 1;

  if (MediaQuery.of(context).orientation == Orientation.portrait)
    screenWidth = MediaQuery.of(context).size.width;
  else
    screenWidth = MediaQuery.of(context).size.height;

  if (screenWidth <= smallScreenWidth)
    return 32.0;
  else if (screenWidth <= mediumScreenWidth)
    return 40.0;
  else
    return 48.0;
}