Блог

Главная - Вопросы по программированию - Перенос контейнера в столбец приводит к переполнению

Перенос контейнера в столбец приводит к переполнению

#flutter #dart #flutter-layout

#трепетание #dart #трепетание-макет

Вопрос:

Рассмотрим следующий пример приложения:

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {

  double percentageHeight(num percentage) {
    MediaQueryData media = MediaQuery.of(this.context);
    double availableHeight = media.size.height - media.padding.top;

    return availableHeight * percentage / 100;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        // ###### relevant part start ######
        body: SafeArea(
          child: Container(
            color: Colors.orange,
            height: percentageHeight(90),
          ),
        ),
        // ###### relevant part end ######
        bottomNavigationBar: BottomAppBar(
          color: Colors.grey,
          elevation: 0,
          notchMargin: 0,
          child: Container(
            height: percentageHeight(10),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[],
            ),
          ),
        ));
  }
}

Это работает и приводит к следующему результату (iPhone 11 Pro (11.6)):

введите описание изображения здесь

Когда я заменяю body (ранее Container с высотой 90%) на

 SafeArea(
          child: Column(
            children: [
              Container(
                height: percentageHeight(90),
                color: Colors.orange,
              ),
            ],
          ),
        )

Я получаю переполнение, которое выглядит следующим образом:

введите описание изображения здесь

Почему он ведет себя так? Имеет ли Column собственную высоту?

Комментарии:

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

2. Когда я запускал его на iPhone SE, переполнения также не было, только на 11 pro и 11 max. Да, перенос его в Expanded работает, но тогда свойство height больше не требуется. Я хотел бы указать точные проценты для своих контейнеров, чтобы мне было легче контролировать их содержимое. Конечно, я могу заставить его работать Expanded но я также хотел бы понять, почему он ведет себя так