与Flutter设备相关的布局只有一类？

问题描述

我正在尝试这样的布局：

我试图做的布局类如下：

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(),

然后我的想法是说出左视图，以设置rightView，尽管很明显，除非再次设置左视图，否则它将不起作用。只有在平板电脑或手机视图中时，我才希望执行常规的Navigation.push

我已尽力找到这样的解决方案，但无济于事。因此，对于如何实现此目标的任何建议将不胜感激。

解决方法

我想在单独的小部件中为每个方向制作整个小部件树，然后根据屏幕宽度和方向选择要使用的小部件。当我只想调整几个组件的大小时，我将常量用于屏幕和函数的大小。例如：

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;
}