Flutter 问题 - Row spaceBetween 不起作用

Question

我想要文本和图像之间的间距，但这里行 spaceBetween 不起作用， 当我使用 expanded 时出现错误。如何解决这个问题。

这是我的代码。

AspectRatio(
              aspectRatio: 16 / 4.5,
              child: ListView.separated(
                  physics: BouncingScrollPhysics(),
                  separatorBuilder: (context, index) => Divider(
                        indent: 12,
                      ),
                  scrollDirection: Axis.horizontal,
                  itemCount: myPizza.length,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: EdgeInsets.only(
                          left: index == 0 ? 20 : 0,
                          right: index == myPizza.length - 1 ? 20 : 0),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child:Container(
      padding: EdgeInsets.only(top: 9, left: 9, right: 9, bottom: 9),
      decoration: BoxDecoration(
        color: MyColor.blueColor.withOpacity(0.06),
      ),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,

        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Crinkle Fries",
                    style: textStyleWith12500(MyColor.blackColor),
                  ),
                  Text(
                    "₹ 99",
                    style: textStyleWith10500(MyColor.greenColor),
                  ),
                ],
              ),
              Stack(
                fit: StackFit.passthrough,
                children: [
                  Container(
                    height: 46,
                    width: 46,
                    decoration: BoxDecoration(
                      color: MyColor.whiteColor,
                      borderRadius: BorderRadius.circular(4),
                      boxShadow: [
                        BoxShadow(
                          color: MyColor.greyColor.withOpacity(0.35),
                          blurRadius: 3.0,
                        ),
                      ],
                    ),
                    child: Container(
                      height: 46,
                      width: 46,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(4),
                          image: DecorationImage(
                            image: AssetImage('assets/BannerImages/card1.png'),
                            fit: BoxFit.fill,
                          )),
                    ),
                  ),
                  Positioned(
                      top: 5,
                      right: 5,
                      child: Image.asset(
                        "assets/verification_icon.png",
                        height: 9,
                        width: 8.5,
                      ))
                ],
              ),
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Container(
            height: 24,
            width: 147,
            child: ButtonWithTextStyle(
              onPressed: () {},
              btnColor: MyColor.primaryRedColor,
              btnText: "ADD",
              btnTextStyle: textStyleWith10500(MyColor.whiteColor),
              radius: 4.0,
            ),
          )
        ],
      ),
    ),
                      ),
                    );
                  }),
            ),

这是我的用户界面

但实际上我想要这样

Answer 1

检查我的代码，我在文本和图像之间使用了Spacer小部件

您可以使用 Spacer 小部件来实现您的功能 :) 不错。

 AspectRatio(
                  aspectRatio: 16 / 4.5,
                  child: ListView.separated(
                      physics: BouncingScrollPhysics(),
                      separatorBuilder: (context, index) => Divider(
                            indent: 12,
                          ),
                      scrollDirection: Axis.horizontal,
                      itemCount: myPizza.length,
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: EdgeInsets.only(
                              left: index == 0 ? 20 : 0,
                              right: index == myPizza.length - 1 ? 20 : 0),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(8),
                            child:Container(
          padding: EdgeInsets.only(top: 9, left: 9, right: 9, bottom: 9),
          decoration: BoxDecoration(
            color: MyColor.blueColor.withOpacity(0.06),
          ),
          child: Column(crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
    
            children: [
              Row(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Crinkle Fries",
                        style: textStyleWith12500(MyColor.blackColor),
                      ),
                      Text(
                        "₹ 99",
                        style: textStyleWith10500(MyColor.greenColor),
                      ),
                    ],
                  ),
                  Spacer(), //try using Spacer 
                  Stack(
                    fit: StackFit.passthrough,
                    children: [
                      Container(
                        height: 46,
                        width: 46,
                        decoration: BoxDecoration(
                          color: MyColor.whiteColor,
                          borderRadius: BorderRadius.circular(4),
                          boxShadow: [
                            BoxShadow(
                              color: MyColor.greyColor.withOpacity(0.35),
                              blurRadius: 3.0,
                            ),
                          ],
                        ),
                        child: Container(
                          height: 46,
                          width: 46,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(4),
                              image: DecorationImage(
                                image: AssetImage('assets/BannerImages/card1.png'),
                                fit: BoxFit.fill,
                              )),
                        ),
                      ),
                      Positioned(
                          top: 5,
                          right: 5,
                          child: Image.asset(
                            "assets/verification_icon.png",
                            height: 9,
                            width: 8.5,
                          ))
                    ],
                  ),
                ],
              ),
              SizedBox(
                height: 10,
              ),
              Container(
                height: 24,
                width: 147,
                child: ButtonWithTextStyle(
                  onPressed: () {},
                  btnColor: MyColor.primaryRedColor,
                  btnText: "ADD",
                  btnTextStyle: textStyleWith10500(MyColor.whiteColor),
                  radius: 4.0,
                ),
              )
            ],
          ),
        ),
                          ),
                        );
                      }),
                ),