Flutter：列表视图内的网格视图

Posted 2023-02-23

【中文标题】Flutter：列表视图内的网格视图

【英文标题】：Flutter : Grid View inside list view

【发布时间】：2019-06-01 22:29:00

【问题描述】：

我试过了：

ListView.builder(
  shrinkWrap: true,
  itemBuilder: (BuildContext context, int index) 
  return GridView.count(
  crossAxisCount: 5,
  children: List.generate(10, (index) 
    return Center(
      child: Text(
        '$index AM',
      ),
    );
  ),
);
,
itemCount: partnerArr.length,
)

我想在我的 Scaffold 主体中制作这种类型的列表视图，我该怎么做？

【参考方案1】：

你可以试试这个代码：

@override
  Widget build(BuildContext context) 
    return Scaffold(
        body: ListView.separated(
      separatorBuilder: (context, int) 
        return Divider(color: Colors.black,);
      ,
     // shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) 
        return GridView.count(
          shrinkWrap: true,
          crossAxisCount: 3,
          childAspectRatio: 2.0,
          children: List.generate(6, (index) 
            return Center(
              child: RaisedButton(
                onPressed: (),
                color: Colors.greenAccent,
                child: Text(
                  '$index AM',
                ),
              ),
            );
          ),
        );
      ,
      itemCount: 4,
    ));
  

输出：

【讨论】：

如何对每个网格行项设置不同的值？

【参考方案2】：

使用CustomScrollView

CustomScrollView(
  slivers: List.generate(
      10,
      (item) => SliverGrid(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 150.0,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) 
                return Container(
                  alignment: Alignment.center,
                  color: Colors.amber[100 * (index % 9)],
                  child: Text('grid item $index'),
                );
              ,
              childCount: 6,
            ),
          )),
)

【讨论】：

您能否解释一下，它如何减缓我的具体问题？

【参考方案3】：

import 'package:flutter/material.dart';

class SubmitRequest extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 
    return _SubmitRequest();
  


class _SubmitRequest extends State<SubmitRequest> 
  @override
  Widget build(BuildContext context) 
    return new Scaffold(
        drawer: Drawer(
          child: Container(
            color: Colors.black54,
            child: ListView(
              padding: EdgeInsets.only(top: 40.0),
              children: <Widget>[
                ListTile(
                  title: Text('Dashboard'),
                ),
                ListTile(
                  title: Text('Submit Reports'),
                ),
                ListTile(
                  title: Text('Inbox Requests'),
                ),
              ],
            ),
          ),
        ),
        appBar: AppBar(
          backgroundColor: Colors.blue,
          leading: IconButton(icon: Icon(Icons.menu), onPressed: () ),
          actions: <Widget>[
            //    IconButton(icon: Icon(Icons.search), onPressed: () ),
            IconButton(icon: Icon(Icons.help), onPressed: () ),
          ],
          bottom: PreferredSize(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(0.0, 0.0, 15.0, 16.0),
              child: Container(
                margin: EdgeInsets.only(left: 16.0),
                child: TextField(
                  decoration: new InputDecoration(
                      suffixIcon: IconButton(
                          icon: Icon(Icons.search),
                          onPressed: () 
                            debugPrint('222');
                          ),
                      border: new OutlineInputBorder(
                        borderRadius: const BorderRadius.all(
                          const Radius.circular(50.0),
                        ),
                      ),
                      filled: true,
                      hintStyle: new TextStyle(color: Colors.grey[800]),
                      hintText: "Search",
                      fillColor: Colors.white),
                ),
              ),
            ),
            preferredSize: Size(0.0, 80.0),
          ),
        ),
        body: Scaffold(
            body: ListView.builder(
//              separatorBuilder: (context, int) 
//                return Divider(color: Colors.black,);
//              ,
              // shrinkWrap: true,
              itemBuilder: (BuildContext context, int index) 
                return GridView.count(
                  shrinkWrap: true,
                  crossAxisCount: 4,
                  childAspectRatio: 1.0,
                  children: List.generate(6, (index) 
                    return GridTile(
                      child: new Card(
                        color: Colors.blue.shade100,
                        child: new Center(
                          child: new Text('Exterior $index'),
                        ),
                      ),
                    );
                  ),
                );
              ,
              itemCount: 4,
            )
        )
    );