主页 / coding / 问题 / 79593587
Accepted
DevQt
Asked: 2025-04-26 12:50:13 +0800 CST

Flutter 中的 Wrap 与 Column

  • 772

有趣的是，如果我必须使用这些小部件列出详细信息：

Row(
  mainAxisAlignment:
      MainAxisAlignment.spaceBetween,
  children: [
    Text('some label'),
    Text('some value'),
  ],
),
Row(
  mainAxisAlignment:
      MainAxisAlignment.spaceBetween,
  children: [
    Text('some label'),
    Text('some value'),
  ],
),

每次我都用一种更简单的方式将它们包裹Wrap起来Column。

如果我使用，我永远无法达到我预期的效果Wrap，就像这样：

Wrap(
  direction: Axis.vertical,
  spacing: 8.0,
  children: [
    Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
    Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
  ],
),

意外的输出：

使用_of_wrap

问题是内容放在了左侧。即使我Wrap用SizedBox(width: double.infinity, child: ...)

Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [...],)我仅通过这种方法实现了我想要的（即，因为我在这里使用）：

使用Column()widget而不是Wrap()widget

Column(
  spacing: 8.0,
  children: [
    Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
    Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
  ],
),

预期输出：

使用列

请注意，SizedBox(width: double.infinity, child: Column(...))对于这种情况而言是多余的，除非有用例建议这样做。

有人能更详细地解释一下为什么会发生这种情况吗？如果我们倾向于使用这种布局结果，更好地理解这一点可以避免实施错误的设置。

PS 如果在DartPad中执行，行为保持不变

这是最小的、可重复的示例：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          spacing: 8.0,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [Text('some label'), Text('some value')],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [Text('some label'), Text('some value')],
            ),
          ],
        ),
      ),
    );
  }
}
flutter

3 个回答

  1. Best Answer

    这与 Wrap 小部件的用途有关。该小部件不会尝试扩展到次轴，因为后续运行将转到那里。

    让我们看一下您的示例：您将 Wrap 轴设置为垂直。这意味着它将开始从上到下放置小部件。但是，当它到达约束的底部时，它将“断开一条线”并移动到第二行/列。

    因此，如果它尝试扩展行，它将消耗它在接下来的运行中尝试使用的所有空间。

    • 1 
  2. Column(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
    SizedBox(height: 8), // Spacing between rows // no need remove it
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
  ],
)
    • 0

  3. 在此处输入图片描述完整代码

    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          children: [
            const SizedBox(height: 8), // Spacing between items
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                Text('some label'),
                Text('some value'),
              ],
            ),
            const SizedBox(height: 8), // Spacing between items
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                Text('some label'),
                Text('some value'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
    • 0

相关问题