Блог

У меня есть одна строка с двумя дочерними элементами. Первый — это перенос, а второй — другая строка, например:

 Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetweeen,
  children: [
    Wrap(<two children in here>),
    Row(<2 or 3 children in here>)
]
 

Я ожидал, что когда экран будет меньше, дочерние элементы Wrap будут накладываться друг на друга слева, а дочерние элементы Row останутся в строке справа.

На самом деле происходит переполнение дочерней строки вправо, а дочерние элементы Wrap никогда не накладываются друг на друга.

Цель состоит в том, чтобы избежать переполнения, но не «разбивать» дочернюю строку. Дочерний элемент Wrap — это то, что я хочу «сломать», когда размер окна слишком мал, чтобы иметь как перенос, так и дочернюю строку в родительской строке.

PS — это для Интернета, а не для мобильных устройств. Я не думаю, что это имеет значение.

Оберните Wrap виджет в Expanded :

 Row(
  children: [
    Expanded(
      child: Wrap(
        spacing: 20,
        runSpacing: 20,
        children: [
          Container(width: 100, height: 50, color: Colors.green),
          Container(width: 100, height: 50, color: Colors.green),
          Container(width: 100, height: 50, color: Colors.green),
        ],
      ),
    ),
    Row(
      children: [
        Container(width: 100, height: 50, color: Colors.red),
        SizedBox(width: 30),
        Container(width: 100, height: 50, color: Colors.red),
      ],
    ),
  ],
)
 

Вы можете добиться этого, встроив свой дочерний Row элемент в IntrinsicWidth виджет.

В этом примере я также встроил родительский Row элемент в IntrinsicHeight виджет Row , чтобы дочерние элементы растягивались в соответствии с Wrap .

Полный исходный код

 import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IntrinsicHeight(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Flexible(
              child: Wrap(
                children: [
                  Card(
                    child: Container(
                      color: Colors.blue.shade200,
                      padding:
                          EdgeInsets.symmetric(horizontal: 24.0, vertical: 8.0),
                      child: Text('Text 1'),
                    ),
                  ),
                  Card(
                    child: Container(
                      color: Colors.blue.shade200,
                      padding:
                          EdgeInsets.symmetric(horizontal: 24.0, vertical: 8.0),
                      child: Text('Text 2'),
                    ),
                  ),
                ],
              ),
            ),
            IntrinsicWidth(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Card(
                    child: Container(
                      color: Colors.green.shade200,
                      padding:
                          EdgeInsets.symmetric(horizontal: 24.0, vertical: 8.0),
                      child: Text('Text A'),
                    ),
                  ),
                  Card(
                    child: Container(
                      color: Colors.green.shade200,
                      padding:
                          EdgeInsets.symmetric(horizontal: 24.0, vertical: 8.0),
                      child: Text('Text B'),
                    ),
                  ),
                  Card(
                    child: Container(
                      color: Colors.green.shade200,
                      padding:
                          EdgeInsets.symmetric(horizontal: 24.0, vertical: 8.0),
                      child: Text('Text C'),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
 

Я обернул дочерний элемент Wrap() в Expanded(), как предложил Кирилл Бубочкин. Обертывание дочернего элемента Wrap() в Flexible() также имеет тот же эффект.