如何在颤动中填充水平空间？答案

【问题标题】：How can I fill horizontal space in flutter?如何在颤动中填充水平空间？
【发布时间】：2021-02-20 09:16:24
【问题描述】：

 Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(
                              left: 15, bottom: 8, top: 1),
                          child: Row(
                            //crossAxisAlignment: CrossAxisAlignment.start,
                            //mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  // ITEM NAME
                                  Padding(
                                    padding: const EdgeInsets.only(
                                        left: 10, top: 10),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          '${restaurantItems[i].name}',
                                          style: TextStyle(
                                              fontSize: 17,
                                              color: kTextColor,
                                              fontWeight: FontWeight.w700),
                                        ),
                                        SizedBox(
                                          width: width / 2,
                                        ),

                                        // 'ADD' BUTTON CONTAINER
                                        Container(
                                          decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(8),
                                            color: Colors.black87,
                                          ),
                                          child: Padding(
                                            padding: const EdgeInsets.only(
                                                left: 9,
                                                top: 3,
                                                right: 5,
                                                bottom: 3),
                                            child: InkWell(
                                              splashColor: Colors.white,
                                              onTap: () {
                                                // print(restaurantItems[i].name);
                                                cart.addItem(
                                                  restaurantItems[i].id,
                                                  restaurantItems[i].name,
                                                  restaurantItems[i].price,
                                                  restaurant,
                                                );
                                              },
                                              child: Row(
                                                children: [
                                                  Text(
                                                    'ADD',
                                                    style: TextStyle(
                                                      color: Colors.white,
                                                    ),
                                                  ),
                                                  Icon(
                                                    Icons.add,
                                                    color: Colors.white,
                                                    size: 17,
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(
                                        left: 10, top: 10, bottom: 11),
                                    child: Text(
                                      '₹${restaurantItems[i].price}',
                                      style: TextStyle(
                                          fontSize: 15,
                                          color: kTextColor,
                                          fontWeight: FontWeight.w500),
                                    ),
                                  ),
                                  // Padding(
                                  //   padding: const EdgeInsets.only(
                                  //       left: 17, top: 17),
                                  //   child: InkWell(
                                  //     onTap: () {
                                  //       // Add to Cart
                                  //     },
                                  //     child: Row(
                                  //       children: [
                                  //         Padding(
                                  //           padding:
                                  //               const EdgeInsets.only(left: 15),
                                  //           child: Text(
                                  //             '${restaurantItems[i].quantity} Left',
                                  //             style: TextStyle(
                                  //                 color: kTextLightColor,
                                  //                 fontSize: 13,
                                  //                 fontWeight: FontWeight.w700),
                                  //           ),
                                  //         )
                                  //       ],
                                  //     ),
                                  //   ),
                                  // )
                                ],
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),

如何填充“ITEM NAME”和“ADD CONTAINER”之间的空格？我已经尝试过 spacer()，但它不起作用。另外，我见过 Expanded() 小部件，但由于我是新来的，我似乎无法掌握它。我还添加了 Column 小部件，因此我猜 Spacer() 小部件无法正常工作。任何帮助将不胜感激，谢谢。

【问题讨论】：

这个小部件是否在Column 中？你能提供整个小部件树吗？你的代码看起来不错。我猜有些parent widget 正在限制您的项目小部件的width。
只需将Row的mainAxisSize设置为MainAxisSize.Max即可。
是的，它在@YoBo 列中
我认为，Spacer 应该可以工作。您能否分享一张使用 Spacer 的屏幕截图以及您希望它看起来是什么样子的屏幕截图？
@PreetShah 他不需要带有 mainAxisAlignment 的 Spacer：MainAxisAlignment.spaceBetween。它基本上会在项目之间为您添加它。我在一个测试应用程序中尝试了他的示例并且它有效。他的问题很可能来自父部件树，但由于我们看不到全貌，我们无法帮助他。

标签： flutter dart flutter-layout

【解决方案1】：

在“项目名称”和“添加容器”之间使用 SizedBox 小部件。例如：

Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
        body: SafeArea(
            child: Padding(
    padding: const EdgeInsets.only(left: 10, top: 10),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          'test',
          style: TextStyle(
              fontSize: 17,
              color: Colors.black,
              fontWeight: FontWeight.w700),
        ),
        // Spacer()
        SizedBox(width: width/2,)
        // 'ADD' BUTTON CONTAINER
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.black87,
          ),
          child: Padding(
            padding:
                const EdgeInsets.only(left: 9, top: 3, right: 5, bottom: 3),
            child: InkWell(
              splashColor: Colors.white,
              onTap: () {
                // print(restaurantItems[i].name);
                // cart.addItem(
                //   restaurantItems[i].id,
                //   restaurantItems[i].name,
                //   restaurantItems[i].price,
                //   restaurant,
                // );
              },
              child: Row(
                children: [
                  Text(
                    'ADD',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  Icon(
                    Icons.add,
                    color: Colors.white,
                    size: 17,
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  ),));
  }

【讨论】：

我想让它动态化。它不适用于所有设备，对吧？
对于该问题，您可以使用 MediaQuery 获取设备的高度和宽度大小。您的代码对我来说工作正常。但我编辑了我的答案，向您展示如何使用 MediaQurey。
您的代码似乎部分工作。在某些情况下我会遇到溢出错误，而在其他情况下它可以正常工作。
如果你使用 SizedBox 你应该删除这行代码在 Row: mainAxisAlignment: MainAxisAlignment.spaceBetween,

【解决方案2】：

为了在小部件之间提供空间，您可以使用 SizedBox(width:10)

【讨论】：

【解决方案3】：

如果您不想定义宽度大小，请使用 Spacer() 填充空间

【讨论】：

【解决方案4】：

试试这个：

Text(
  '${restaurantItems[i].name}',
  style: TextStyle(
    fontSize: 17,
    color: kTextColor,
    fontWeight: FontWeight.w700,
  ),
),
Spacer(flex: 1),
// 'ADD' BUTTON CONTAINER
Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    color: Colors.black87,
  ),
  child: Padding(
    padding: const EdgeInsets.only(
      left: 9,
      top: 3,
      right: 5,
      bottom: 3,
    ),
    child: InkWell(
      splashColor: Colors.white,
      onTap: () {
        // print(restaurantItems[i].name);
        cart.addItem(
          restaurantItems[i].id,
          restaurantItems[i].name,
          restaurantItems[i].price,
          restaurant,
        );
      },
      child: Row(
        children: [
          Text(
            'ADD',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          Icon(
            Icons.add,
            color: Colors.white,
            size: 17,
          ), // Icon
        ], // <Widget>[]
      ), // Row
    ), // InkWell
  ), // Padding
), // Container

Spacer(flex: 4),

【讨论】：