用flutter实现仿番茄免费小说排行榜布局

hbws37

已于 2023-10-09 19:47:29 修改

阅读量288

点赞数

文章标签： flutter 前端

于 2023-10-09 18:36:34 首次发布

本文链接：https://blog.csdn.net/hbws37/article/details/133711347

版权

//多列布局
Container(
  width: 2000,
  height: 380,
  child: GridView.builder(
    itemCount: 20, // 4行 * 5列 = 20个元素
    scrollDirection: Axis.horizontal,
    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
      maxCrossAxisExtent: 80, // //单个子Widget的水平最大宽度
      childAspectRatio: 0.4,
      mainAxisSpacing: 4.0, // 主轴上的元素间距
      crossAxisSpacing: 4.0, // 次轴上的元素间距
    ),
    itemBuilder: (BuildContext context, int index) {
      // 在这里创建您的子部件，例如Text、Image等
      return GestureDetector(
          onTap: () => {print('跳转了')},
          child: Container(
            width: 180,
            height: 30,
            decoration: BoxDecoration(color: Colors.grey[100]),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.network(
                  'https://p2.ssl.qhimgs1.com/sdr/400__/t014c5a2dfd70ce0f22.jpg