Flutter wrap 不像行的 child

Question

我有一排有两个 children。第一个是 Wrap，第二个是另一个 Row，如下所示：

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

我预计，当屏幕较小时，Wrap 的 children 会在左侧堆叠在一起，而 Row 的 children 会在右边.

实际发生的是 child 行向右溢出，Wrap children 永远不会相互堆叠。

目标是避免溢出，而不是 'break' child 行。当 window 的大小太小而无法在 parent 行中同时包含 Wrap 和 child 行时，Wrap child 就是我想要 'break' 的内容。

PS - 这适用于网络，不适用于移动设备。我认为这不重要。

Answer 1

将您的 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),
      ],
    ),
  ],
)

Answer 2

您可以通过将 child Row 嵌入 IntrinsicWidth 小部件来实现此目的。

在此示例中，我还将 parent Row 嵌入到 IntrinsicHeight 小部件中以获得 child Row children拉伸以匹配 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'),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

我按照 Kirill Bubochkin 的建议将 Wrap() 子级包装在 Expanded() 中。在 Flexible() 中包裹 Wrap() child 也有同样的效果。

Flutter wrap 不像行的 child

Flutter wrap does not as child of row

flutter

flutter-layout

flutter-web

flutter-row

完整源代码