flutter - 为什么 Gridview.count 没有用我的动态内容填充空间

Question

我正在尝试从第二列开始创建一个 GridView 。第一张卡片只是一张带有按钮的静态卡片。所以第二张牌开始应该是动态的。

所有卡片的宽度和高度都相同。所以基本上它们都应该看起来像第一张卡片(添加一条新狗)

但它并没有像我预期的那样填满空间。

这是正文部分的部分代码:

body: Stack(fit: StackFit.expand, children: [
      //bg image
      Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage(Images.bgYellow), fit: BoxFit.cover)),
      ),
      //content
      SafeArea(
        bottom: false,
        left: true,
        right: true,
        top: false,
        child: Padding(
            padding: EdgeInsets.all(3 * SizeConfig.safeBlockHorizontal),
            child: GridView.count(
                    crossAxisCount: 2,
                    children: [
                      //add card
                      Container(
                        margin: EdgeInsets.symmetric(
                            vertical: 1 * SizeConfig.blockSizeVertical,
                            horizontal: 2 * SizeConfig.blockSizeHorizontal),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(30),
                          color: Colors.white,
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey.withOpacity(0.5),
                              spreadRadius: 2,
                              blurRadius: 8,
                              offset: Offset(
                                  0, 2), // changes position of shadow
                            ),
                          ],
                        ),
                        child: FlatButton(
                            onPressed: null,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(
                                  const IconData(0xe901,
                                      fontFamily: 'icDog'),
                                  color: muddyBrown,
                                  size: 20 * SizeConfig.safeBlockHorizontal,
                                ),
                                SizedBox(height: 5),
                                Text(
                                  "ADD A NEW  DOG",
                                  style: TextStyle(
                                      color: muddyBrown,
                                      fontWeight: FontWeight.bold,
                                      fontSize: 4 *
                                          SizeConfig.safeBlockHorizontal),
                                )
                              ],
                            )),
                      ),
                      //dynamic content
                      StateBuilder<PetState>(
                          observe: () => _petStateRM,
                          builder: (context, model) {
                            return Column(
                              children: [
                                ...model.state.pets.map((pet) =>
                                    GestureDetector(
                                      onTap: () {
                                        Navigator.pushNamed(
                                            context, petDetailRoute);
                                      },
                                      child: Container(
                                        margin: EdgeInsets.symmetric(
                                            vertical: 1 *
                                                SizeConfig
                                                    .blockSizeVertical,
                                            horizontal: 2 *
                                                SizeConfig
                                                    .blockSizeHorizontal),
                                        decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(30),
                                          color: Colors.white,
                                          boxShadow: [
                                            BoxShadow(
                                              color: Colors.grey
                                                  .withOpacity(0.5),
                                              spreadRadius: 2,
                                              blurRadius: 8,
                                              offset: Offset(0,
                                                  2), // changes position of shadow
                                            ),
                                          ],
                                        ),
                                        child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          //dynamic data => Photo + Name
                                          children: [
                                            Container(
                                              width: 100.0,
                                              height: 100.0,
                                              decoration: new BoxDecoration(
                                                color:
                                                    const Color(0xff7c94b6),
                                                image: new DecorationImage(
                                                  image: new NetworkImage(
                                                      "${pet.photo}"),
                                                  fit: BoxFit.cover,
                                                ),
                                                borderRadius:
                                                    new BorderRadius.all(
                                                        new Radius.circular(
                                                            50.0)),
                                                border: new Border.all(
                                                  color: muddyBrown,
                                                  width: 4.0,
                                                ),
                                              ),
                                            ),
                                            SizedBox(height: 5),
                                            Text(
                                              "${pet.name}",
                                              style: TextStyle(
                                                  fontSize: 4 *
                                                      SizeConfig
                                                          .safeBlockHorizontal,
                                                  color: muddyBrown,
                                                  fontWeight:
                                                      FontWeight.bold),
                                            )
                                          ],
                                        ),
                                      ),
                                    ))
                              ],
                            );
                          }),
                    ],
                  )
                )),
    ]));

Answer 1

简单地将“静态”卡片添加到“动态”卡片，然后构建一个包含所有卡片的 GridView 怎么样？

Widget newDogButton = Card(...);

//dynamic content
StateBuilder<PetState>(
  observe: () => _petStateRM,
  builder: (context, model) {
    return Column(
      children: [
          newDogButton,
          ...model.state.pets.map((pet) =>  // ...

这应该会自动解决大部分布局问题。