flutter - 嗨，有人可以向我解释为什么我必须在 MyApp() 中创建一个构建器，以便我可以使用 mediaquery 吗？

Question

正如标题所说，我想知道如何在 MyApp() 或 Firstpage() 中创建一个构建器，以便我的 Mediaquery.of(context) 可以正常工作，尽管对于其他页面它工作正常。我的问题是，因为我的其他页面没有构建器，我还应该添加它吗？

这是代码

MyApp() code
import 'package:flutter/material.dart';
import 'package:fluttertestpage/FirstpageUI.dart';
import 'package:fluttertestpage/secondpage.dart';

void main() {
  runApp(FirstPage());
}

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(body: FirstPageUI().getFirstPageUIWidget()));
  }
}

已连接返回小部件

import 'package:flutter/material.dart';
import 'package:fluttertestpage/secondpage.dart';

class FirstPageUI {
  Widget getFirstPageUIWidget() {
    return Builder(
        builder: (context) => (Container(
          width: MediaQuery.of(context).size.width*.5,
              color: Colors.black,
              child: Center(
                child: RaisedButton(
                  child: Text("1st -> 2nd"),
                  onPressed: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => SecondPage()));
                  },
                ),
              ),
            )));
  }

}

这是我没有构建器的第二页

import 'package:flutter/material.dart';
import 'package:fluttertestpage/secondpageui.dart';
import 'package:fluttertestpage/thirdpage_0.dart';
import 'package:fluttertestpage/thirdpage_1.dart';

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SecondPageUI(context).getSecondPageUIWidget()
      ),
    );
  }
}

返回第二页的小部件

import 'package:flutter/material.dart';
import 'package:fluttertestpage/thirdpage_0.dart';
import 'package:fluttertestpage/thirdpage_1.dart';

class SecondPageUI {
  SecondPageUI(this.context);

  final BuildContext context;

  Widget getSecondPageUIWidget() {
    return Container(
      color: Colors.white,
      child: Center(
          child: Column(
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width*.5,
            height: MediaQuery.of(context).size.height * .5,
            decoration: BoxDecoration(color: Colors.orangeAccent,),
          ),
          RaisedButton(
            child: Text("2nd -> 3rd0"),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ThirdPage_0()),
              );
            },
          ),
          RaisedButton(
            child: Text("2nd -> 3rd1"),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ThirdPage_1()),
              );
            },
          ),
        ],
      )),
    );
  }
}

标签： flutterdesign-patternsflutter-layout