如何创建显示交错网格视图的下拉菜单？

Question

我想将我的交错网格视图放在一个下拉菜单中，如下面的草图。我不知道该怎么形容它。如果您能引导我走向正确的方向或向我展示如何实现这一目标，我将不胜感激！

Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。

这是我的交错网格视图代码：

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:transparent_image/transparent_image.dart';

class Grid extends StatefulWidget {
  @override
  _GridState createState() => _GridState();
}

class _GridState extends State<Grid> {
  List<String> imageList = [
    'https://i.pinimg.com/originals/78/c1/80/78c1805437afbfa026b04d550385d118.jpg',
    'https://i.pinimg.com/originals/78/c1/80/78c1805437afbfa026b04d550385d118.jpg',
    'https://i.pinimg.com/originals/78/c1/80/78c1805437afbfa026b04d550385d118.jpg',
    'https://i.pinimg.com/originals/78/c1/80/78c1805437afbfa026b04d550385d118.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: ListView(
          children: [
            ListTile(title: Center(
              child: Text('Category 1',
                style: TextStyle(
                    fontSize: 60),
              ),
            ),
            ),


            Container(
              margin: EdgeInsets.all(10),
              child: Container(
                child: StaggeredGridView.countBuilder(
                  shrinkWrap: true,
                  primary: false,
                  crossAxisCount: 2,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 12,
                  itemCount: imageList.length,
                  itemBuilder: (context, index) {
                    return Container(
                      decoration: BoxDecoration(
                        color: Colors.transparent,
                        borderRadius: BorderRadius.all(
                          Radius.circular(15),
                        ),
                      ),
                      child: ClipRRect(
                        borderRadius: BorderRadius.all(
                          Radius.circular(15),
                        ),
                        child: FadeInImage.memoryNetwork(
                            placeholder: kTransparentImage,
                            image: imageList[index],
                            fit: BoxFit.cover),
                      ),
                    );
                  },
                  staggeredTileBuilder: (index) {
                    return StaggeredTile.count(1, index.isEven ? 1.2 : 1.8);
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以像这样创建小部件：

import 'package:flutter/material.dart';

class MainPage extends StatelessWidget {
  static late double width;
  static late double height;

  @override
  Widget build(BuildContext context) {
    width = MediaQuery.of(context).size.width;
    height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) => GridMenu(),
      ),
    );
  }
}

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

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

class _GridMenuState extends State<GridMenu> {
  bool _collapse = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () => setState(() {
            _collapse = !_collapse;
          }),
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              children: [
                Expanded(
                    child: Text(
                  'Category',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                )),
                Icon(_collapse
                    ? Icons.keyboard_arrow_up
                    : Icons.keyboard_arrow_down),
              ],
            ),
          ),
        ),
        AnimatedContainer(
          duration: Duration(milliseconds: 500),
          width: MainPage.width,
          height: _collapse ? MainPage.width : 0,
          child: GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
            ),
            itemCount: 20,
            itemBuilder: (context, index) => GestureDetector(
              onTap: () {
                /** choose item **/
              },
              child: Container(
                margin: EdgeInsets.all(16),
                color: Colors.green,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

我希望这对你有用。