是否有更优化的方式来 space 列中的小部件？

Question

所以我正在模拟我拥有的旧应用程序，其中 UI 看起来像这样

目前我专注于为紫色侧边栏创建 UI 布局，我通过创建一个带有紫色背景的容器来做到这一点。在容器中，我创建了一个包含多个子项的列，并仅使用一个空的 SizedBox 来创建一个小部件与另一个小部件之间的距离。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text('Sample Text'),
      //   elevation: 5.0,
      // ),
      body: _buildContent(),
    );
  }

  Widget _buildContent() {
    // private method
    return Container(
      color: Colors.deepPurpleAccent,
      padding: EdgeInsets.all(16.0),
      child: Column(
        // crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            color: Colors.orange,
            child: SizedBox(
              height: 100.0,
              width: 80.0,
            ),
          ),
          SizedBox(
            height: 140.0,
          ),
          Container(
            color: Colors.red,
            child: SizedBox(
              height: 50.0,
              width: 80.0,
            ),
          ),
          SizedBox(
            height: 8.0,
          ),
          Container(
            color: Colors.purple,
            child: SizedBox(
              height: 50.0,
              width: 80.0,
            ),
          ),
        ],
      ),
    );
  }
}

我对 flutter 还很陌生，所以我想知道是否有更好的方法来构建侧边栏的布局？还要想想以后，既然“BagTrack”这个名字和“Analytic Overview”是一个级别的，那应该只是一个巨大的行吗？

Answer 1

是的。但是使用 SizedBox 也不会造成伤害。

对于抽屉中的每个元素，我通常更喜欢 ListTile。

ListTile(
leading: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {},
child: Container(
  width: 48,
  height: 48,
  padding: const EdgeInsets.symmetric(vertical: 4.0),
  alignment: Alignment.center,
  child: const CircleAvatar(),
   ),
  ),
  title: const Text('title'),
  dense: false,
  )

Answer 2

实际答案

方法一

@Mahfuzur Rahman回答的不错，但是要真正回答你的问题还有其他的方法。 Flex 小部件（Column 和 Row 扩展了 Flex 小部件），同时具有 mainAxisAlignment 和 crossAxisAlignment，它们可以用来更对齐它们很容易在不同的 devices/screens 尺寸之间。

因此，可以将 Column 中的红色和紫色框分组，并将 mainAxisSize 设置为 MainAxisSize.min，并将周围的列与特定大小对齐。

https://api.flutter.dev/flutter/widgets/Column-class.html

方法二

另一种方式，如果您希望某个小部件从其父级中占用一定百分比的 space，我建议您查看 Expanded widget, Flexible 小部件。

方法三

甚至 FractionallySizedBox could be a good widget for you, but then I would also look at this LayoutBuilder widget to solve the potential Unbounded Height/Width 异常。

第二个小问题

关于巨排的第二个问题完全由您来决定。我不会这样做。可能会使用 const SizedBox 或 const EdgeInsets（对于 Padding）并以这种方式将它们保持在相同的高度。

补充Flutter知识

PS: 由于您是 Flutter 新手。作为对未来性能的建议：尽可能避免使用 Container 小部件，有很多更简单的小部件，例如 SizedBox、ColoredBox、DecoratedBox 和 Padding 你可以在它的位置使用它，有时可以标记为 const 并且更便宜。

为了理解final和const：

final 是一个不能在您的代码中意外重新分配的变量。当你实例化它时，你给它一个值，就是这样。（使用 late 改变了一点但不多）；
const是编译器赋值的变量，如果你熟悉C就好像是#define但是有一点区别，每次你说const EdgeInsets.all(8)比如，编译器会检测到并使用相同的变量，因此您不必记住特定的常量变量名称。

是否有更优化的方式来 space 列中的小部件？

Is there a more optimal way to space widgets within a column?

ios

flutter

dart

user-interface

widget

实际答案

方法一

方法二

方法三

第二个小问题

补充Flutter知识