Flutter Row игнорирует дочерние элементы, если они переполнены

Question

Как рассчитать или игнорировать дочерние виджеты строки, если они переполнены. Я не хочу использовать Wrap, чтобы поместить содержимое на следующую строку, я хочу скрыть переполненные дочерние виджеты

Container(
                padding: EdgeInsets.only(top: 3.0),
                child: Row(
                  children: searchResult.serviceNames
                      .map((service) => getServiceLabels(service))
                      .toList(),
                ),
              ),

PS способ обрезать переполненных детей Wrap это то, что я после

Answer 1

Если вы не хотите переносить дочерний элемент на следующую строку, вы можете поместить переполняющий виджет в SingleChildScrollViewчто позволяет Rowв этом случае для расширения до его внешней границы без переполнения:

      SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Container(
        padding: EdgeInsets.only(top: 3.0),
        child: Row(
                  children: searchResult.serviceNames
                      .map((service) => getServiceLabels(service))
                      .toList(),
          ),
        ),
      ),
    );

На самом деле, если вы хотите отображать каждый элемент целиком (то есть без обрезания посередине из-за отсутствия ширины экрана), в зависимости от размера экрана у вас есть 2 варианта:

• Рассчитайте ширину каждого элемента:

      var itemWidth = MediaQuery.of(context).width // 3; // 3 is number of items you want to display

• Подсчитайте количество предметов:

      var itemNumbers = MediaQuery.of(context).width // 150; // 150 is the item's width you want to display

Answer 2

Как сказал user10488444 , вы можете обернуть содержимое в SingleChildScrollView. Однако, если вы хотите ограничить прокрутку содержимого, вы можете добавить NeverScrollablePhysics:

      return SingleChildScrollView(
          physics: const NeverScrollableScrollPhysics(),
          child: Column(
            children: [],
          ),
        );

Answer 3

Использовать OverflowBox учебный класс:

https://docs.flutter.io/flutter/widgets/OverflowBox-class.html

Смотрите также:

• RenderConstrainedOverflowBox для получения подробной информации о том, как отображается OverflowBox.

• SizedOverflowBoxвиджет, который имеет определенный размер, но передает свои исходные ограничения своему дочернему элементу, который затем может переполниться.

• UnconstrainedBoxконтейнер, который пытается позволить своему дочернему элементу рисовать без ограничений.