首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何根据SliverGridDelegate中文本的大小创建自动大小的网格项?

如何根据SliverGridDelegate中文本的大小创建自动大小的网格项?
EN

Stack Overflow用户
提问于 2022-09-05 03:46:32
回答 1查看 66关注 0票数 0
代码语言:javascript
运行
复制
GridView.custom(
  gridDelegate: SliverQuiltedGridDelegate(
    crossAxisCount: 2,
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    repeatPattern: QuiltedGridRepeatPattern.inverted,
    pattern: [
      const QuiltedGridTile(2, 1),
      const QuiltedGridTile(1, 1),
    ],
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      ......

所以我现在的实现是这样的。

希望根据内容大小调整列表瓷砖/网格块的大小,使其看起来像动态网格。我还需要弄清楚如何将delete按钮放在右下角,但这是对另一天的挑战。

EN

回答 1

Stack Overflow用户

发布于 2022-09-05 05:25:56

您可以使用视图

代码语言:javascript
运行
复制
import 'package:flutter/material.dart';

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class StaggeredGridExample extends StatefulWidget {
  @override
  _StaggeredGridExampleState createState() => _StaggeredGridExampleState();
}

class _StaggeredGridExampleState extends State<StaggeredGridExample> {
  final List<String> staggeredGridViewImage = [
    "https://uae.microless.com/cdn/no_image.jpg",
    "https://images-na.ssl-images-amazon.com/images/I/81aF3Ob-2KL._UX679_.jpg",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgUgs8_kmuhScsx-J01d8fA1mhlCR5-1jyvMYxqCB8h3LCqcgl9Q",
    "https://media.ed.edmunds-media.com/gmc/sierra-3500hd/2018/td/2018_gmc_sierra-3500hd_f34_td_411183_1600.jpg",
    "https://www.galeanasvandykedodge.net/assets/stock/ColorMatched_01/White/640/cc_2018DOV170002_01_640/cc_2018DOV170002_01_640_PSC.jpg",
    "https://media.onthemarket.com/properties/6191869/797156548/composite.jpg",
    "https://media.onthemarket.com/properties/6191840/797152761/composite.jpg",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StaggeredGridView.countBuilder(
        crossAxisCount: 4,
        mainAxisSpacing: 24,
        crossAxisSpacing: 12,
        itemCount: staggeredGridViewImage.length,
        itemBuilder: (BuildContext context, int index) => Card(
          child: Column(
            children: <Widget>[
              Image.network(staggeredGridViewImage[index]),
              Text("Some text"),
            ],
          ),
        ),
        staggeredTileBuilder: (int index) => new StaggeredTile.fit(2),     
      ),
    );
  }
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73604366

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档