0

是否有可能在 gridview.builder 中有一个比其他项目更大的特定项目，并且像下面 Flutter 中的图像那样重叠它们？

我尝试添加孩子的纵横比，但它不是特定于孩子的，我无法访问索引来使用它进行函数调用。如果我尝试手动更改容器的宽度和高度，它会给我一个“RenderFlex 溢出”错误

我也尝试通过做替换特定的孩子

child: selectedIndex != index ? Dice(index: index) : Dice2(index: index)

但由于我猜是孩子的纵横比，那是不工作的艾格峰。但即使删除比率后，我仍然无法手动更改宽度或高度。

这是我的代码：

import 'dart:collection';

import 'package:bordered_text/bordered_text.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:randomdice2/declarations/constants.dart';
import 'package:randomdice2/functions/functions.dart';

class GreenScreen extends StatefulWidget {
  const GreenScreen({Key? key}) : super(key: key);

  @override
  State<GreenScreen> createState() => _GreenScreenState();
}

class _GreenScreenState extends State<GreenScreen> {
  bool showingOriginalWidget = true;
  int selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2.5;
    final double itemWidth = size.width / 2;
    return Stack(
      fit: StackFit.expand,
      children: [
        Lottie.asset("assets/lottie/background.json", fit: BoxFit.cover),
        Column(
          children: [
            ElevatedButton(onPressed: () {}, child: const Text("Press me")),
            Expanded(
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                child: GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    mainAxisSpacing: 10,
                    crossAxisSpacing: 10,
                    childAspectRatio: (itemWidth / itemHeight),
                  ),
                  itemCount: dices.length,
                  itemBuilder: (BuildContext context, int index) {
                    return GestureDetector(
                      onTap: () {
                        setState(() {
                          if (selectedIndex == index) {
                            selectedIndex = -1;
                          } else {
                            selectedIndex = index;
                          }
                        });
                      },
                      child: Container(
                        height: 120, // cant set this, neither width
                        decoration: BoxDecoration(
                          color: getColor2(index),
                          border: Border.all(color: Colors.transparent),
                          borderRadius:
                              const BorderRadius.all(Radius.circular(4)),
                          boxShadow: const [
                            BoxShadow(
                              color: Colors.black,
                              blurRadius: 2.0,
                              spreadRadius: 0.0,
                              offset: Offset(0, 1),
                            )
                          ],
                        ),
                        child: Column(
                          children: [
                            Container(
                              height: 80,
                              width: 80,
                              color: getColor(index),
                              child: Image.asset(
                                'assets/dice/174x192/${dices.keys.elementAt(index)}',
                                scale: 3,
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(3.0),
                              child: BorderedText(
                                strokeWidth: 3,
                                child: const Text(
                                  "Class 10",
                                  style: TextStyle(color: Colors.white),
                                ),
                              ),
                            ),
                            const Padding(
                              padding: EdgeInsets.all(3.0),
                              child: ClipRRect(
                                borderRadius: BorderRadius.all(
                                  Radius.circular(4),
                                ),
                                child: LinearProgressIndicator(
                                  value: 0.5,
                                  color: Color(0xff55bef3),
                                  backgroundColor: Color(0xff2b2b2b),
                                  minHeight: 15,
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    selectedIndex = -1;
                    dices = LinkedHashMap.fromEntries(
                        dices.entries.toList().reversed);
                  });
                },
                child: const Text("Press me")),
          ],
        ),
      ],
    );
  }
}

我想要它 - 示例

4

2 回答 2

0

这是演示代码，您可以应用到您的代码并尝试：

      OverlayEntry overlayEntry;

      Rect getWidget(GlobalKey key){
        final renderObject = key.currentContext?.findRenderObject();
        final translation = renderObject?.getTransformTo(null).getTranslation();
        if (translation != null && renderObject?.paintBounds != null) {
          final offset = Offset(translation.x, translation.y);
          return renderObject.paintBounds.shift(offset);
        } else {
          return null;
        }
      }

// overylay a scaled current widget
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: 2/3,
              ),
              itemCount: 30,
              itemBuilder: (context, index) {
                final containerKey = GlobalKey();
                final LayerLink _layerLink = LayerLink();

                return GestureDetector(
                  onTap: () {
                    overlayEntry?.remove();
                    
                    Rect _obj = getWidget(containerKey);

                    overlayEntry = OverlayEntry(
                      builder: (context) {
                        return Positioned(
                          top: _obj.top,
                          left: _obj.left,
                          child: CompositedTransformFollower(
                            link: _layerLink,
                            showWhenUnlinked: false,
                            child: Transform.scale(
                              scale: 1.2,
                              child: Container(
                                width: _obj.width,
                                height: _obj.height,
                                color: Colors.blue,
                                child: Center(
                                  child: Icon(Icons.settings),
                                ),
                              ),
                            ),
                          ),
                        );
                      },
                    );
                    Overlay.of(context).insert(overlayEntry);
                  },
                  child: CompositedTransformTarget(
                    link: _layerLink,
                    child: Container(
                      key: containerKey,
                      color: Colors.red,
                      child: Center(
                        child: Icon(Icons.settings),
                      ),
                    ),
                  ),
                );
              },
            ),
于 2021-11-03T02:59:32.443 回答
0

在项目构建器内部，根据指定要缩放的项目的属性，使子容器的尺寸有所不同：如下所示：

itemBuilder: (context, index) {

    return Container(
     height: items[index].pro == "special" ? 120:50 ,
     width: items[index].pro == "special" ? 70:30 ,

    );
  },
于 2021-11-01T09:51:13.577 回答