flutter - 颤振包装不作为行的孩子

Question

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

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

我预计，当屏幕变小时，Wrap 的子代会在左侧堆叠在一起，而 Row 的子代会在右侧排成一行。

实际发生的是子 Row 向右溢出，并且 Wrap 子级从不堆叠在一起。

目标是避免溢出，而不是“破坏”子行。当窗口的大小太小而无法在父行中同时包含 Wrap 和子 Row 时，Wrap 子代是我想要“打破”的。

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

您可以通过将您的孩子嵌入 Widget 来实现这 Row一点IntrinsicWidth。

在此示例中，我还将父级嵌入到RowWidgetIntrinsicHeight中，以使子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'),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

我像 Kirill Bubochkin 建议的那样，将 Wrap() 子项包裹在 Expanded() 中。在 Flexible() 中包装 Wrap() 子项也具有相同的效果。