Сбой вычислений высоты appBar appBar

Question

Я создаю приложение, в котором я хотел показать 4 контейнера, покрывающие все доступное пространство на телефоне.

Для этого я получаю все width и height экрана, используя MediaQuery.of.Я заставляю 4 контейнера заполнить весь экран, давая каждому из них высоту 0,25 от общей высоты.

Исходный код приходит и работает нормально:

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 контейнера, я получаю сообщение об ошибке переполнения пикселя в последнем контейнере.

Телефон: Huawei 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")),
          ),
        ],
      ),
    );