如何在Flutter的小部件之间添加空间？

在本文中，我们将学习如何在小部件之间添加空间。有flutter中，你可以用它来提供空间，使UI吸引力许多可供选择。如果您使用行和列来排列小部件，则默认情况下可用于对齐的选项有限。有许多可用于小部件间距的选项，例如 Padding、Spacer、Fractionally、 SizedBox 、Expanded、Flexible 等。在这里，我们将了解SizedBox ，因为它更容易实现，在对齐方面提供更大的灵活性，也更容易了解。

如果没有提供约束，则SizedBox基本上是一个空框。默认情况下，它可以变得与父小部件允许的一样大，但您可以根据需要设置其高度和宽度。

构造函数

Syntax:
const SizedBox({
      Key key,
      double width,
      double height,
      Widget child
 })

以下是上述约束的描述：-

1. Key key ：此参数的类型为 key。键基本上是小部件的标识符。可以为小部件提供唯一的密钥以识别它们。
2. double width ：此参数的类型为 double。您可以提供 double 值作为要应用于子项的宽度。
3. double height ：此参数也是 double 类型。要应用于孩子的高度在此处作为双精度值传递。
4. Widget child ：树中此小部件下方的小部件在此处作为子部件传递，并且上述约束将自动应用于它。

向SizedBox提供子小部件不是强制性的。例如，如果您有两个 Card 小部件并且想要在它们之间留出空间，那么您可以使用SizedBox 。您可以在这些卡片之间添加SizedBox并传递所需的高度和宽度值。

注意：如果您没有为SizedBox提供子小部件并且高度和宽度也为空，那么SizedBox将尝试尽可能大，因为它的父小部件允许。另一方面，如果提供了子部件但高度和宽度为空，则 SizedBox 将尝试匹配它的子部件的大小。

示例：使用SizedBox

Dart

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Column(
            children: [
              SizedBox(
                height: 20,
              ),
              Card(
                elevation: 10,
                child: Padding(
                  padding: const EdgeInsets.all(25),
                  child: Text('GeeksforGeeks',
                  style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
  
              SizedBox(   //Use of SizedBox
                height: 30,
              ),
  
              Card(
                elevation: 10,
                child: Padding(
                  padding: const EdgeInsets.all(25),
                  child: Text('GeeksforGeeks',
                  style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出 ：

在这里，在上面的例子中，我们制作了两张卡片。默认情况下，我们无法在它们之间添加自定义空间。因此，为了添加所需的空间量，我们使用了具有自定义高度的SizedBox ，这是必需的。

示例：没有SizedBox

Dart

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Column(
            children: [
              // SizedBox(
              //   height: 20,
              // ),
              Card(
                elevation: 10,
                child: Padding(
                  padding: const EdgeInsets.all(25),
                  child: Text('GeeksforGeeks',
                  style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
  
              // SizedBox(
              //   height: 30,
              // ),
  
              Card(
                elevation: 10,
                child: Padding(
                  padding: const EdgeInsets.all(25),
                  child: Text('GeeksforGeeks',
                  style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出 ：

在上面的输出中，我们可以看到两张卡之间的空间很小。它们之间的这个小空间也是因为提供给卡片的高度。您可以使用列提供的各种对齐选项来对齐它们，但这在这种特定情况下并不方便。因此，在需要自定义间距和大小的这种情况下，我们使用SizedBox 。