如何在Flutter中粘贴对象之间的空间？

Question

我需要你的帮助。我是新来的Flutter，我正在写我的第一个应用程序。我想在对象之间插入空间beetween对象（图像，但只要我没有设计他们，我使用占位符），并将其居中。这里有一些截图，所以你可以想象我的意思。

这是我的代码（只有主体）。

body:
        Container(
          child: Center(
           child: Column(
              children: <Widget> [
                 Row(
                  children: <Widget> [
                    Placeholder( 
                      color: Colors.deepOrange,
                      strokeWidth: 3.5,
                      fallbackWidth: 75.0,
                      fallbackHeight: 75.0,
                   ),

                   Placeholder( 
                      color: Colors.indigo,
                      strokeWidth: 3.5,
                      fallbackWidth: 75.0,
                      fallbackHeight: 75.0,
                    ),

                    Placeholder( 
                      color: Colors.pink[200],
                      strokeWidth: 3.5,
                      fallbackWidth: 75.0,
                      fallbackHeight: 75.0,
                    ),
                  ],
                   ),


                   Row(
                    children: <Widget> [
                      Placeholder( 
                       color: Colors.black,
                        strokeWidth: 3.5,
                       fallbackWidth: 75.0,
                       fallbackHeight: 75.0,
                    ),

                     Placeholder( 
                       color: Colors.blueGrey[300],
                       strokeWidth: 3.5,
                       fallbackWidth: 75.0,
                       fallbackHeight: 75.0,
                    ),

                   Placeholder( 
                      color: Colors.red,
                     strokeWidth: 3.5,
                     fallbackWidth: 75.0,
                     fallbackHeight: 75.0,
                    ),
                   ],
                  ),
                    Row(
                    children: <Widget> [
                      Placeholder( 
                       color: Colors.blueGrey[300],
                        strokeWidth: 3.5,
                       fallbackWidth: 225.0,
                       fallbackHeight: 75.0,
                    ),
                    ],
                    ),
                ],
              ),


         ),
     ),

Answer 1

我建议使用构造函数 GridView.count 来创建该布局。https:/api.flutter.devflutterwidgetsGridView-class.html。

 body: Column(
        children: [
          Expanded(
            child: GridView.count(
              padding: EdgeInsets.all(10.0),
              crossAxisCount: 3,
              childAspectRatio: 1.0,
              crossAxisSpacing: 20.0,
              mainAxisSpacing: 20.0,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(10),
                  child: Text("Hello World"),
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.circular(13),
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  child: Text("Hello World"),
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.circular(13),
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  child: Text("Hello World"),
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.circular(13),
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  child: Text("Hello World"),
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.circular(13),
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  child: Text("Hello World"),
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.circular(13),
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  child: Text("Hello World"),
                  decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.circular(13),
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(bottom: 140),
            width: 200,
            height: 100,
            padding: EdgeInsets.all(10),
            child: Text("Hello World"),
            decoration: BoxDecoration(
              color: Colors.grey,
              borderRadius: BorderRadius.circular(13),
            ),
          ),
        ],
      ),

Answer 2

你可以用 表

这样实现

Widget genetareRow(){

 List<TableRow> tables = List();
 List<Widget> itemTable = List();

itemTable.add(yourwidget(), 1);
itemTable.add(yourwidget(), 2);
itemTable.add(yourwidget(), 3);

tables.add(itemTable);
itemTable = List();
itemTable.add(yourwidget(), 1);
itemTable.add(yourwidget(), 2);
itemTable.add(yourwidget(), 3);

tables.add(itemTable);



 return Table(
      children: tables,
    );

}

Answer 3

您可以通过在您的.属性中添加.属性来实现所需的布局。mainAxisAlignment: MainAxisAlignment.spaceEvenly, 属性来实现所需的布局。column，以及第一至行。另外，最后一行应该通过设置在中心位置上的 mainAxisAlignment: MainAxisAlignment.center, 财产。

这里的 你可以阅读更多关于对齐Flutter小部件的内容。

完整的代码。

Container(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Placeholder(
                  color: Colors.deepOrange,
                  strokeWidth: 3.5,
                  fallbackWidth: 75.0,
                  fallbackHeight: 75.0,
                ),
                Placeholder(
                  color: Colors.indigo,
                  strokeWidth: 3.5,
                  fallbackWidth: 75.0,
                  fallbackHeight: 75.0,
                ),
                Placeholder(
                  color: Colors.pink[200],
                  strokeWidth: 3.5,
                  fallbackWidth: 75.0,
                  fallbackHeight: 75.0,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Placeholder(
                  color: Colors.black,
                  strokeWidth: 3.5,
                  fallbackWidth: 75.0,
                  fallbackHeight: 75.0,
                ),
                Placeholder(
                  color: Colors.blueGrey[300],
                  strokeWidth: 3.5,
                  fallbackWidth: 75.0,
                  fallbackHeight: 75.0,
                ),
                Placeholder(
                  color: Colors.red,
                  strokeWidth: 3.5,
                  fallbackWidth: 75.0,
                  fallbackHeight: 75.0,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Placeholder(
                  color: Colors.blueGrey[300],
                  strokeWidth: 3.5,
                  fallbackWidth: 225.0,
                  fallbackHeight: 75.0,
                ),
              ],
            ),
          ],
        ),
      ),
    )

Answer 4

你可能需要实现一个GridView来实现这个用户界面。

body: Column(
        children: <Widget>[
          Flexible(
            child: Padding(
              padding: const EdgeInsets.only(top: 16.0, bottom: 32.0),
              child: GridView.count(
                padding: const EdgeInsets.all(20),
                /// This sets the horizontal space between each cell
                crossAxisSpacing: 10,
                /// This sets the vertical space between each cell
                mainAxisSpacing: 30,
                crossAxisCount: 3,
                children: <Widget>[
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text("He'd have you all unravel at the"),
                    color: Colors.teal[100],
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Heed not the rabble'),
                    color: Colors.teal[200],
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Sound of screams but the'),
                    color: Colors.teal[300],
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Who scream'),
                    color: Colors.teal[400],
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Revolution is coming...'),
                    color: Colors.teal[500],
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    child: const Text('Revolution, they...'),
                    color: Colors.teal[600],
                  ),
                ],
              ),
            ),
          ),
          Flexible(
            child: Container(
              /// I used MediaQuery to set the width of the Container to 90% of the device screen
              width: MediaQuery.of(context).size.width * 0.90,
              height: 80.0,
              color: Colors.purple,
            ),
          ),
        ],
      ),

你可以在这里阅读更多关于它的内容 https:/api.flutter.devflutterwidgetsGridView-class.html。

希望能帮到你