Question

我正在构建一个应用，我想在其中显示4个容器，覆盖手机上的整个可用空间。

为此，我使用width获得了完整的height和MediaQuery.of屏幕。通过使每个容器的高度为总高度的0.25，使4个容器充满整个屏幕。

初始代码在这里，可以正常工作：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: MyHomePage(title: 'Title')),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return _buildMobileLayout(context);
  }

  Widget _buildMobileLayout(BuildContext context) {
    AppBar appBar = AppBar(
      title: Text("My App Title"),
    );

//    var newHeight =
//        (MediaQuery.of(context).size.height - appBar.preferredSize.height) *
//            0.25;

    var newHeight = (MediaQuery.of(context).size.height) * 0.25;

    return Scaffold(
      //appBar: appBar,
      body: Column(
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width,
            height: newHeight,
            child: Center(child: Text("Cont 1")),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: newHeight,
            child: Center(child: Text("Cont 2")),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: newHeight,
            child: Center(child: Text("Cont 3")),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: newHeight,
            child: Center(child: Text("Cont 4")),
          ),
        ],
      ),
    );
  }
}

如您在上面的代码中看到的，我还没有包括appBar，因为这是问题出现的时间。在没有appBar的情况下，一切正常，但是当我包含appBar时，即使我在照顾它的高度，获取一个新的总高度并将其分配到4个容器中，也会由于最后一个容器上的像素溢出而出现错误。 / p>

电话：华为P20 Pro。

Answer 1

您可以将每个小部件包装在MediaQuery中，而不用使用Expanded，并为其赋予相同的flex。

 return Scaffold(
      //appBar: appBar,
      body: Column(
        children: <Widget>[
           Expanded(
            flex: 1,
            child: Center(child: Text("Cont 1")),
          ),
          Expanded(
            flex: 1,
            child: Center(child: Text("Cont 2")),
          ),
          Expanded(
            flex: 1,
            child: Center(child: Text("Cont 3")),
          ),
          Expanded(
            flex: 1,
            child: Center(child: Text("Cont 4")),
          ),
        ],
      ),
    );

Flutter appBar高度计算失败

1 个答案: