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

Posted

技术标签:

【中文标题】如何创建显示交错网格视图的下拉菜单?【英文标题】:How can I create a dropdown menu that shows a staggered grid view? 【发布时间】:2021-08-25 11:33:29 【问题描述】:

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

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);
                  ,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  


【问题讨论】:

【参考方案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,
              ),
            ),
          ),
        ),
      ],
    );
  

我希望这对你有用。

【讨论】:

非常感谢! 我该怎么做?

以上是关于如何创建显示交错网格视图的下拉菜单?的主要内容,如果未能解决你的问题,请参考以下文章

交错网格视图无法在 2 列中显示数据

交错网格视图在 Flutter 中不向上滚动

C4D视图界面颜色变灰?请问如何恢复初始颜色

ad封装背景网格怎么调出来

剑道网格视图行高亮

场景视图控制栏