如何在 ListView ontap 中展开小部件？答案

【问题标题】：How to expand a widget in ListView ontap?如何在 ListView ontap 中展开小部件？
【发布时间】：2021-02-04 06:56:06
【问题描述】：

我创建了一个带有容器框的 ListView 作为小部件。我想要一个特定的容器将 onTap 扩展到特定的屏幕高度和宽度。我需要帮助来实现这一点。我在 AdobeXD 上做了一个原型。

AdobeXD Prototype GIF

我是 Flutter 的新手，感谢任何形式的帮助。

【问题讨论】：

自己试试，遇到代码卡住的时候在这里问。

标签： flutter flutter-layout flutter-animation flutter-listview flutter-container

【解决方案1】：

兄弟，你去吧，虽然它没有模糊背景，但我认为它会让你继续前进。

它的工作原理是这样的：

下面的代码可以复制粘贴。我在代码中添加了 cmets 以便更好地理解它。干杯:)

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeApp(),
    );
  }
}

class HomeApp extends StatefulWidget {
  @override
  _HomeAppState createState() => _HomeAppState();
}

class _HomeAppState extends State<HomeApp> {
  // Items in the list --> Custom Widgets
  List<Widget> arr = [
    ListContainerHere(),
    ListContainerHere(),
    ListContainerHere(),
    ListContainerHere(),
    ListContainerHere(),
    ListContainerHere(),
  ];

  Widget getListWidget(List<Widget> items) {
    List<Widget> list = new List<Widget>();

    for (var i = 0; i <= items.length; i++) {
      list.add(new ListContainerHere(
        index: i,
      ));
    }
    return Row(children: list);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter App :)"),
      ),
      body: Center(
        // Using a 'Row' as Horizontal ListView
        child: SingleChildScrollView(
            scrollDirection: Axis.horizontal, child: getListWidget(arr)),
      ),
    );
  }
}

// Widgets that will be rendered in the Horizontal Row
class ListContainerHere extends StatefulWidget {
  final int index;
  ListContainerHere({this.index});

  @override
  _ListContainerHereState createState() => _ListContainerHereState();
}

class _ListContainerHereState extends State<ListContainerHere> {
  // Varibale to change the height and width accordingly
  // Initally no item will be expanded
  bool isExpanded = false;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GestureDetector(
        onTap: () {
          // Changing the value of 'isExpanded' when an item is tapped in the List
          setState(() {
            isExpanded = !isExpanded;
          });
        },
        // AnimatedContainer for slowing down the changing
        child: AnimatedContainer(
          duration: Duration(milliseconds: 150),
          // Changing the width and height
          height: isExpanded ? 250 : 150,
          width: isExpanded ? 250 : 150,
          // Decoration Portion of the Container
          decoration: BoxDecoration(
              color: Colors.blue, borderRadius: BorderRadius.circular(15.0)),
        ),
      ),
    );
  }
}

【讨论】：

很好。有没有办法添加快照效果并将中心页面放大到这个？
我很抱歉你所说的快照效果是什么意思？考虑到放大，您可以简单地增加height 和width 它将起作用:)
看看这个 gif。 ibb.co/FJc2gkq 我希望中心小部件比其他小部件大一点。小部件必须始终位于中心。因此，当我点击它时，它会扩展为更大的小部件。（您可以在主要问题中看到该 gif）
@RohitGanji 对不起兄弟，我正在尝试解决方案，但无处可去。我会尽快更新答案，我会完成工作。同时，如果它有助于标记投票:) 干杯！

【解决方案2】：

一个名为 flutter swiper 的颤振插件可能会帮助您实现您想要实现的目标。访问这个 pub dev，你可以阅读文档。

【讨论】：

谢谢，我可以创建一个 ListView。但我希望该框可以在点击时展开。
将列表项包裹在 InkWell 小部件中，它具有 onTap 属性，您可以在其中扩展被点击小部件的大小