如何在 Flutter 中使用 Spacer() 填充水平空间？答案

【问题标题】：How can I fill horizontal space using Spacer() in Flutter?如何在 Flutter 中使用 Spacer() 填充水平空间？
【发布时间】：2021-05-23 06:24:33
【问题描述】：

@override
      Widget build(BuildContext context) {
        return 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),
                              ),
                             
                              //Spacer(),
    
                              // '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),
                          ),
                        ),
                     
                      ],
                    ),
                  ],
                ),
              ),
            ],
          );
      }
    }

我在尝试使用 Spacer() 小部件时遇到了一个问题，可能是因为我猜想是 Parent 小部件。此外，mainAxisAlignment.spaceAround 似乎不起作用。

使用 Spacer() 时出现以下错误：

RenderFlex 子项具有非零 flex 但传入的宽度约束是无限的。

有没有其他方法可以做到这一点或修复上述错误？

感谢您的时间和支持。

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

您有太多的行和列只有一个孩子。

试试这个

@override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 15, bottom: 8, top: 1),
      child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // ITEM NAME
              Padding(
                padding: const EdgeInsets.only(left: 10, top: 10),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '${restaurantItems[i].name}',
                      style: TextStyle(
                          fontSize: 17,
                          color: kTextColor,
                          fontWeight: FontWeight.w700),
                    ),

                    //Spacer(),

                    // '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),
                ),
              ),
            ],
          ),
    );
  }

【讨论】：

现在工作正常。谢谢！