Flutter wrap 不是 row 完整源代码

问题描述

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

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

我预计，当屏幕较小时，Wrap 的子项会在左侧堆叠在一起，而 Row 的子项会留在右侧的 Row 中。

实际发生的情况是子行向右溢出，而 Wrap 子项永远不会相互堆叠。

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

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

解决方法

将您的 Wrap 小部件包装到 Expanded 中：

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

,

您可以通过将您的孩子 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,child: Text('Text 2'),IntrinsicWidth(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.stretch,children: [
                  Card(
                    child: Container(
                      color: Colors.green.shade200,child: Text('Text A'),Card(
                    child: Container(
                      color: Colors.green.shade200,child: Text('Text B'),child: Text('Text C'),);
  }
}

,

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