flutter瀑布流佈局

依賴

flutter_staggered_grid_view: ^0.7.0 #flutter瀑布流

程式碼例子

  Widget _bestContent() {
    return Obx(() => Container(
          child: Column(
            children: [
              Container(
                color: Colors.yellow,
                height: ScreenAdapter.height(500),
                width: ScreenAdapter.width(500),
                child: MasonryGridView.count(
                  crossAxisCount: 2, //列
                  mainAxisSpacing: ScreenAdapter.height(50), //高度間距
                  crossAxisSpacing: ScreenAdapter.width(50), //寬度間距
                  itemCount: controller.homeController.vocabularyList.length,
                  shrinkWrap: true, //收縮自適應
                  // physics: const NeverScrollableScrollPhysics(), //禁止左右滑動
                  itemBuilder: (context, index) {
                    return Container(
                        decoration: BoxDecoration(
                          borderRadius:
                              const BorderRadius.all(Radius.circular(15)),
                          color: Colors.white,
                          border: Border.all(
                            color: Colors.black,
                            width: 0.8,
                          ),
                        ),
                        child: ConstrainedBox(
                          constraints: BoxConstraints(
                            minHeight: ScreenAdapter.height(300), // 設定最小高度
                          ),
                          child: Text(
                            "$index  ${controller.homeController.vocabularyList[index].dclj}",
                            style: TextStyle(
                              fontFamily:
                                  '${controller.homeController.motifsModelItem.value.textFont}',
                              fontSize: ScreenAdapter.fontSize(50),

                              fontWeight: FontWeight.bold, // 設定字重
                            ),
                          ),
                        ));
                  },
                ),
              )
            ],
          ),
        ));
  }