Блог

У меня есть форма, и внутри нее у меня есть несколько текстовых полей и горизонтальный вид прокрутки, куда я могу загрузить несколько изображений.

Форма имеет меньшую ширину, чем экран, поэтому это влияет и на представление списка. Я хочу, чтобы это представление списка переполняло его родительский элемент и было таким же широким, как экран телефона.

Как я могу это сделать? Я пытался использовать OverflowBox, но получаю ошибки. Вот мой рабочий код:

 class HorizontalScrollWidget extends StatelessWidget {

 @override
 Widget build(BuildContext context) {
   return
     Container(
       child: Column(
         children: [
           Container(
             child: AutoSizeText(
               ".....",
               maxLines: 1,
               style: ....,
             ),
           ),
           _buildFeaturedCards(5),
         ],
       ),
     );
 }
}

Widget _buildFeaturedCards(int maxLength) {
 final cards = <Widget>[];
 Widget ScrollableCardsRow;

 if (maxLength > 0) {
   for (int i = 0; i < maxLength; i  ) {
     cards.add( SquarePhotoElement() );
   }
   ScrollableCardsRow = Container(
     // TODO: OverflowBox??
     child: Column(
       children: <Widget>[
         SingleChildScrollView(
           scrollDirection: Axis.horizontal,
           child: Row(children: cards),
         ),
       ],
     ),
   );
 } else {
   ScrollableCardsRow = Container();
 }
 return ScrollableCardsRow;
}
 

Спасибо за вашу помощь

Невозможно позволить дочернему элементу быть больше родительского или, по крайней мере, противоречить шаблонам проектирования. Когда вы это делаете, проверка завершится неудачно. Другими словами, если ваш дочерний элемент (скажем, C) больше родительского (скажем, P), и вы нажимаете на место, где отображается C, а P нет, то C никогда не получит никаких событий касания. Это потому, что родительский P думает, что «о, этот кран находится вне моего региона, поэтому я просто игнорирую его». Тогда P никогда не принимает это нажатие, поэтому C никогда не видит это событие. Таким образом, реорганизуйте свое дерево виджетов, чтобы избежать этого.

Другой способ — использовать Overlay (или использовать Portal библиотеку, которая является оболочкой Overlay). Наложения этим не ограничены.

Используйте свойство width ваших контейнеров, чтобы width: double.infinity это понравилось

 class HorizontalScrollWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Column(
        children: [
          Container(
            child: AutoSizeText(
              ".....",
              maxLines: 1,
              style: ....,
            ),
          ),
          _buildFeaturedCards(5),
        ],
      ),
    );
  }


  Widget _buildFeaturedCards(int maxLength) {
    final cards = <Widget>[];
    Widget ScrollableCardsRow;

    if (maxLength > 0) {
      for (int i = 0; i < maxLength; i  ) {
        cards.add( SquarePhotoElement() );
      }
      ScrollableCardsRow = Container(
        // TODO: OverflowBox??
        width: double.infinity,
        child: Column(
          children: <Widget>[
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(children: cards),
            ),
          ],
        ),
      );
    } else {
      ScrollableCardsRow = Container();
    }
    return ScrollableCardsRow;
  }
}
 

Я надеюсь, что приведенное выше решение отлично подходит для вас, но если нет, то вы также можете попробовать приведенный ниже код. Здесь вам просто нужно передать список в конструктор представления сетки, который обернут внутри гибкого.

        Flexible(
            child: GridView.builder(
                itemCount: listProducts.length ,
                scrollDirection: Axis.horizontal,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 1,
                  mainAxisSpacing: 0,
                  childAspectRatio: 2,
                ),
                itemBuilder: (BuildContext context, int index) {
                  return Text("");
                })),