Flutter：我不想使用 MainAxisAlignment.spaceBetween

Posted 2023-02-23

【中文标题】Flutter：我不想使用 MainAxisAlignment.spaceBetween

【英文标题】：Flutter: I wan't to use MainAxisAlignment.spaceBetween

【发布时间】：2021-12-22 05:30:42

【问题描述】：

我不想在“From: Women”和“3.5 Rating”之间使用 MainAxisAlignment.spaceBetween，但是当我使用它时它不起作用，我也想在“Offer: 10% off”之间使用 MainAxisAlignment.spaceBetween和“98 条评论”。这时候我用了 SizedBox 但是不想用了，

我不知道为什么 MainAxisAlignment.spaceBetween 不起作用。请帮帮我。

这是我的代码。

import 'package:bellaz/Extension/AppColor.dart';
import 'package:bellaz/Utils/Constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ServicesDetailsPage extends StatefulWidget 
  const ServicesDetailsPage(Key? key) : super(key: key);

  @override
  _ServicesDetailsPageState createState() => _ServicesDetailsPageState();


class _ServicesDetailsPageState extends State<ServicesDetailsPage> 
  @override
  Widget build(BuildContext context) 


    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.fromLTRB(20, 0, 16, 8),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 4.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "Wax- Full Body",
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          fontSize: t3Size,
                          color: apptitleColor),
                    ),
                    Text(
                      "Rs 344",
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          fontSize: t3Size,
                          color: apptitleColor),
                    )
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 0.0, bottom: 0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      width: MediaQuery.of(context).size.width - 150,
                   
                      child: Padding(
                        padding: const EdgeInsets.only(right: 16.0),
                        child: Text(
                          "Waxing Lorem ipsum dolar Lorem ipsum dolar sit Waxing Lorem ipsum dolar sit Waxing Lorem ipsum dolar sit Waxing Lorem ipsum dolar sit Waxing Lorem ipsum dolar sit",
                          overflow: TextOverflow.ellipsis,
                          maxLines: 3,
                          style: TextStyle(
                              fontWeight: FontWeight.w400,
                              fontSize: t5Size,
                              color: extraLightColor),
                          
                        ),
                      ),
                    ),
                    Text(
                      "60 mins",
                      style: TextStyle(
                          fontWeight: FontWeight.w400,
                          fontSize: t5Size,
                          color: extraLightColor),
                    )
                  ],
                ),
              ),
              Divider(),
              Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: Row(
                  // mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Container(
                      height: 80,
                      width: 80,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        image: DecorationImage(
                          image: NetworkImage(
                            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCosNE8U8r4l6IY0NHJ7icaHynM8gFLQimNg&usqp=CAU",
                          ),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 10.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              //
                              Container(
                                  width:
                                      MediaQuery.of(context).size.width - 240,
                                  child: RichText(
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    text: TextSpan(
                                      text: 'From: ',
                                      style: TextStyle(
                                        fontWeight: FontWeight.w300,
                                        fontSize: t4Size,
                                        // color: salonColor(salonModel.salonType),
                                        color: extraLightColor,
                                      ),
                                      children: <TextSpan>[
                                        TextSpan(
                                          text: "Women",
                                          style: TextStyle(
                                            fontWeight: FontWeight.w600,
                                            fontSize: t2Size,
                                            // color: salonColor(salonModel.salonType),
                                            color: salonColor(SalonType.Male),
                                          ),
                                        ),
                                      ],
                                    ),
                                  )
                                  
                                  ),
                              SizedBox(
                                width: MediaQuery.of(context).size.width - 300,
                              ),
                              Row(
                                children: [
                                  Image.asset(
                                    "lib/Assets/starfill.png",
                                    height: 22,
                                    width: 22,
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(left: 4.0),
                                    child: Text(
                                      // "$branchListData['avg_rating']",
                                      "3.5",
                                      style: TextStyle(
                                          fontWeight: FontWeight.w600,
                                          fontSize: t3Size,
                                          color: apptitleColor),
                                    ),
                                  ),
                                ],
                              )
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Container(
                                width: MediaQuery.of(context).size.width - 263,
                                child: RichText(
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  text: TextSpan(
                                    text: "Offers: ",
                                    style: TextStyle(
                                      fontWeight: FontWeight.w300,
                                      fontSize: t4Size,
                                      // color: salonColor(salonModel.salonType),
                                      color: extraLightColor,
                                    ),
                                    children: <TextSpan>[
                                      TextSpan(
                                        text: "10% off",
                                        style: TextStyle(
                                          fontWeight: FontWeight.w600,
                                          fontSize: t4Size,
                                          // color: salonColor(salonModel.salonType),
                                          color: apptitleColor,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                             
                              SizedBox(
                                width: MediaQuery.of(context).size.width - 292,
                              ),
                              Text(
                                " 98" + ((98 == 1) ? " Review" : " Reviews"),
                                style: TextStyle(
                                    fontWeight: FontWeight.w400,
                                    fontSize: t5Size,
                                    color: apptitleColor),
                              )
                            ],
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
        Divider(
          thickness: 2.1,
        )
      ],
  
    );
  

【参考方案1】：

您需要扩展您的 From woman and offer column 并删除大小框

Column(
      children: [
        Padding(
          padding: const EdgeInsets.fromLTRB(20, 0, 16, 8),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 4.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "Wax- Full Body",
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          fontSize: t3Size,
                          color: apptitleColor),
                    ),
                    Text(
                      "Rs 344",
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          fontSize: t3Size,
                          color: apptitleColor),
                    )
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 0.0, bottom: 0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      width: MediaQuery.of(context).size.width - 150,

                      child: Padding(
                        padding: const EdgeInsets.only(right: 16.0),
                        child: Text(
                          "Waxing Lorem ipsum dolar Lorem ipsum dolar sit Waxing Lorem ipsum dolar sit Waxing Lorem ipsum dolar sit Waxing Lorem ipsum dolar sit Waxing Lorem ipsum dolar sit",
                          overflow: TextOverflow.ellipsis,
                          maxLines: 3,
                          style: TextStyle(
                              fontWeight: FontWeight.w400,
                              fontSize: t5Size,
                              color: extraLightColor),

                        ),
                      ),
                    ),
                    Text(
                      "60 mins",
                      style: TextStyle(
                          fontWeight: FontWeight.w400,
                          fontSize: t5Size,
                          color: extraLightColor),
                    )
                  ],
                ),
              ),
              Divider(),
              Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: Row(
                  children: [
                    Container(
                      height: 80,
                      width: 80,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        image: DecorationImage(
                          image: NetworkImage(
                            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCosNE8U8r4l6IY0NHJ7icaHynM8gFLQimNg&usqp=CAU",
                          ),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                    Expanded( // here you need to expand
                      child: Padding(
                        padding: const EdgeInsets.only(left: 10.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                //
                                Container(
                                    width:
                                    MediaQuery.of(context).size.width - 240,
                                    child: RichText(
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      text: TextSpan(
                                        text: 'From: ',
                                        style: TextStyle(
                                          fontWeight: FontWeight.w300,
                                          fontSize: t3Size,
                                          // color: salonColor(salonModel.salonType),
                                          color: extraLightColor,
                                        ),
                                        children: <TextSpan>[
                                          TextSpan(
                                            text: "Women",
                                            style: TextStyle(
                                              fontWeight: FontWeight.w600,
                                              fontSize: t3Size,
                                              // color: salonColor(salonModel.salonType),
                                              color: apptitleColor,
                                            ),
                                          ),
                                        ],
                                      ),
                                    )

                                ),

                                Row(
                                  children: [
                                    Image.asset(
                                      "lib/Assets/starfill.png",
                                      height: 22,
                                      width: 22,
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(left: 4.0),
                                      child: Text(
                                        // "$branchListData['avg_rating']",
                                        "3.5",
                                        style: TextStyle(
                                            fontWeight: FontWeight.w600,
                                            fontSize: t3Size,
                                            color: apptitleColor),
                                      ),
                                    ),
                                  ],
                                )
                              ],
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                Container(
                                  width: MediaQuery.of(context).size.width - 263,
                                  child: RichText(
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    text: TextSpan(
                                      text: "Offers: ",
                                      style: TextStyle(
                                        fontWeight: FontWeight.w300,
                                        fontSize: t3Size,
                                        // color: salonColor(salonModel.salonType),
                                        color: extraLightColor,
                                      ),
                                      children: <TextSpan>[
                                        TextSpan(
                                          text: "10% off",
                                          style: TextStyle(
                                            fontWeight: FontWeight.w600,
                                            fontSize: t5Size,
                                            // color: salonColor(salonModel.salonType),
                                            color: apptitleColor,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),


                                Text(
                                  " 98" + ((98 == 1) ? " Review" : " Reviews"),
                                  style: TextStyle(
                                      fontWeight: FontWeight.w400,
                                      fontSize: t5Size,
                                      color: apptitleColor),
                                )
                              ],
                            ),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
        Divider(
          thickness: 2.1,
        )
      ],

    )

输出：