颤振-列中的均匀空间无法正常工作 [英] Flutter - Space Evenly in Column does not work as expected

问题描述

Screenshot of the problem I am trying to put elements in the red box by having even spaces between each other. (Like giving weight 1 to each of them). To do so, I put "mainAxisAlignment: MainAxisAlignment.spaceEvenly" in parent Column but it is not working.

Container(
            margin: EdgeInsets.only(bottom: 8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                CachedNetworkImage(
                    imageUrl:
                        "https://image.tmdb.org/t/p/w500/${movieDetails
                        .posterPath}",
                    height: 120.0,
                    fit: BoxFit.fill),
                Expanded(
                    child: Container(
                        margin: EdgeInsets.only(left: 8.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
                          children: <Widget>[
                            generateRow(
                                Strings.released, movieDetails.releaseDate),
                            generateRow(Strings.runtime,
                                movieDetails.runtime.toString()),
                            generateRow(Strings.budget,
                                movieDetails.budget.toString())
                          ],
                        )))
              ],
            )),

This is the code for movie image and the red box. I have created a Row which has 2 elements. First one is that image, second one is for red box.

Row generateRow(String key, String value) {
return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[Text(key), Text(value)],
); }

My generateRow method

How can i solve this problem?

解决方案

As you have given the height to the image is 120.0, can you do the same for the other Container child. By giving this, I was able to achieve what you want.

Code snippet:

Container(
        margin: EdgeInsets.only(bottom: 8.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            CachedNetworkImage(
                imageUrl:
                    "https://image.tmdb.org/t/p/w500/${movieDetails
                    .posterPath}",
                height: 120.0,
                fit: BoxFit.fill),
            Expanded(
                child: Container(
                    height: 120.0 //added to fix
                    margin: EdgeInsets.only(left: 8.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
                      children: <Widget>[
                        generateRow(
                            Strings.released, movieDetails.releaseDate),
                        generateRow(Strings.runtime,
                            movieDetails.runtime.toString()),
                        generateRow(Strings.budget,
                            movieDetails.budget.toString())
                      ],
                    )))
          ],
        )),

Tips to debug:

• I used Flutter Inspector to find the problem. Refer
• Refer the image below. Even though we gave Expanded, it occupied just half the size of image. Here the size of Expanded is determined by child's size (which is almost half the image size).

这篇关于颤振-列中的均匀空间无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！