如何在 Flutter ListView Builder 中删除或管理空间？

Posted 2023-02-23

【中文标题】如何在 Flutter ListView Builder 中删除或管理空间？

【英文标题】：How to remove or manage space in Flutter ListView Builder?

【发布时间】：2019-02-25 18:00:13

【问题描述】：

我是新来的，这个问题也可能是重复的。如果有人可以帮助我找到回答我的问题吗？非常感谢您的善意帮助。

问题： 如何在 Flutter ListView Builder 中移除或管理空间？附件是侧面菜单/导航抽屉的照片。我需要的是减少导航项的高度。换句话说，减少每个项目的顶部和底部间距。

代码如下：

import 'package:flutter/material.dart';
import '../pages/home_screen.dart';
import '../pages/list_page.dart';
import '../pages/item_page.dart';

final List<MenuItem> menuItems = <MenuItem>[
  MenuItem(0,'Home',Icon(Icons.home),Icon(Icons.chevron_right), HomeScreen()),
  MenuItem(1,'List',Icon(Icons.home),Icon(Icons.chevron_right), ListPage()),
  MenuItem(2,'Item',Icon(Icons.home),Icon(Icons.chevron_right), ItemPage()),
  MenuItem(1,'Home',Icon(Icons.home),Icon(Icons.chevron_right), HomeScreen()),
  MenuItem(1,'List',Icon(Icons.home),Icon(Icons.chevron_right), ListPage()),
  MenuItem(2,'Item',Icon(Icons.home),Icon(Icons.chevron_right), ItemPage()),
  MenuItem(1,'Home',Icon(Icons.home),Icon(Icons.chevron_right), HomeScreen()),
  MenuItem(1,'List',Icon(Icons.home),Icon(Icons.chevron_right), ListPage()),
  MenuItem(2,'Item',Icon(Icons.home),Icon(Icons.chevron_right), ItemPage()),
  MenuItem(2,'Item',Icon(Icons.home),Icon(Icons.chevron_right), ItemPage()),
  MenuItem(1,'Home',Icon(Icons.home),Icon(Icons.chevron_right), HomeScreen()),
  MenuItem(1,'List',Icon(Icons.home),Icon(Icons.chevron_right), ListPage()),
  MenuItem(2,'Item',Icon(Icons.home),Icon(Icons.chevron_right), ItemPage()),
];

class XmobeMenu extends StatelessWidget 
  int indexNumber;
  XmobeMenu(int menuIndex)
  
    indexNumber =menuIndex;
  
  @override
  Widget build(BuildContext context) 
    return Drawer(
      child: ListView.builder(
        itemBuilder: (BuildContext context, int index) 
          return MenuItemWidget(menuItems[index],indexNumber);
        ,
        itemCount: menuItems.length,
      ),
    );
  


class MenuItem 
  MenuItem(this.itemNumber,this.title, this.leadIcon, this.trailIcon, this.page);
  final int itemNumber;
  final Icon leadIcon;
  final Icon trailIcon;
  final String title;
  final StatelessWidget page;


class MenuItemWidget extends StatelessWidget 
  final MenuItem item;
  final int indexNumber;
  const MenuItemWidget(this.item, this.indexNumber);

  Widget _buildMenu(MenuItem menuItem, context) 
    return
      new Container(
        color: const Color.fromARGB(0, 245,245,245),
        child: new Column(
          children: <Widget>[
            new Column( children: <Widget>[
              Container(
                 padding: new EdgeInsets.all(0.0),
                 child: ListTile(
                    leading: menuItem.leadIcon,
                    title: Text(menuItem.title,),
                    trailing: menuItem.trailIcon,
                    selected: _checkEnabled(menuItem.itemNumber,indexNumber),
                    onTap: () 
                      Navigator.of(context).push(
                        new MaterialPageRoute(
                          builder: (BuildContext context) => menuItem.page,
                        ),
                      );
                    ,
                  ),
              ),
              Divider(height: 1.0,color: Colors.grey,),
            ],)
          ],
        ),

      );
  
  bool _checkEnabled(int itemNumber, int index)
  
    if(itemNumber==index) 
        return true;
      
      else
        
      return false;
    
  
  @override
  Widget build(BuildContext context) 
    return _buildMenu(this.item, context);
  

【参考方案1】：

由于 ListTile 中的自动填充，您遇到了这个问题。您可以使用 Inkwell 和 Row 来达到相同的效果。遵循代码可能会对您有所帮助。

import 'package:flutter/material.dart';

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

  class MyApp extends StatelessWidget 
    @override
    Widget build(BuildContext context) 
      return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("check"),
          ),
          drawer: XmobeMenu(5),
        ),

      );
    
  

  final List<MenuItem> menuItems = <MenuItem>[
    MenuItem(0,'Home',Icons.home,Icons.chevron_right),
    MenuItem(0,'Home',Icons.home,Icons.chevron_right),
    MenuItem(0,'Home',Icons.home,Icons.chevron_right),
    MenuItem(0,'Home',Icons.home,Icons.chevron_right),
    MenuItem(0,'Home',Icons.home,Icons.chevron_right),
    MenuItem(0,'Home',Icons.home,Icons.chevron_right),
    MenuItem(0,'Home',Icons.home,Icons.chevron_right),
  ];

  class XmobeMenu extends StatelessWidget 
    int indexNumber;
    XmobeMenu(int menuIndex)
    
      indexNumber =menuIndex;
    
    @override
    Widget build(BuildContext context) 
      return Drawer(
        child: ListView.builder(
          itemBuilder: (BuildContext context, int index) 
            return MenuItemWidget(menuItems[index],indexNumber);
          ,
          itemCount: menuItems.length,
        ),
      );
    
  

  class MenuItem 
    MenuItem(this.itemNumber,this.title, this.leadIcon, this.trailIcon,);
    final int itemNumber;
    final IconData leadIcon;
    final IconData trailIcon;
    final String title;
  

  class MenuItemWidget extends StatelessWidget 
    final MenuItem item;
    final int indexNumber;
    const MenuItemWidget(this.item, this.indexNumber);

    Widget _buildMenu(MenuItem menuItem, context) 
      return InkWell(
          onTap: () 
            Navigator.of(context).push(
              new MaterialPageRoute(
                builder: (BuildContext context) => MyApp(),
              ),
            );
          ,
          child: new Container(
            color: const Color.fromARGB(0, 245,245,245),
            child: new Column(
              children: <Widget>[
                new Column( children: <Widget>[
                  Container(
                    padding: new EdgeInsets.all(8.0), // what ever padding you want add here
                    child: Row(
                      children: <Widget>[
                        new Icon(menuItem.leadIcon),
                        new Expanded (
                          child: new Text(menuItem.title),
                        ),
                        new Icon(menuItem.trailIcon),
                      ],
                    )
                  ),
                  Divider(height: 1.0,color: Colors.grey,),
                ],)
              ],
            ),

          ),
        );
    
    bool _checkEnabled(int itemNumber, int index)
    
      if(itemNumber==index) 
        return true;
      
      else
      
        return false;
      
    
    @override
    Widget build(BuildContext context) 
      return _buildMenu(this.item, context);