flutter实现grid布局

307 阅读1分钟

flutter 实现一行四个元素均匀分布,不满靠左对齐

/// ICON列表
List<String> title = <String>["测试1", "测试2", "测试3", "测试4"];
List<String> path = <String>[  "assets/images/header/head_menu_1.png",  "assets/images/header/head_menu_2.png",  "assets/images/header/head_menu_3.png",  "assets/images/header/head_menu_4.png",];
/// 生成一行网格菜单
List<Widget> imageBtns = List<Widget>();
for (int i = 0; i < title.length; i++) {
  imageBtns.add(ImageButton(path[i],
      text: title[i], func: navigateTo, iconSize: 48,
      textStyle: TextStyle(color: AppColor.COMMON_666, fontSize: 13.0)
  ));
}

return Scaffold(
    body: GridView.count(
      //默认主轴竖直
      crossAxisCount: 4, //交叉轴显示矿建个数
      crossAxisSpacing: 16, //交叉轴间距
      mainAxisSpacing: 16, //主轴间距
      // scrollDirection: Axis.horizontal,//水平滚动
      padding: EdgeInsets.all(8.0),
      children: imageBtns,
    )
);

ImageButton 参考juejin.cn/post/732561…