草庐IT

listview - 如何在 Flutter ListView Builder 中移除或管理空间?

coder 2023-05-09 原文

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

问题: 如何在 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);
  }


}

最佳答案

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

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);
    }


  }

关于listview - 如何在 Flutter ListView Builder 中移除或管理空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52441805/

有关listview - 如何在 Flutter ListView Builder 中移除或管理空间?的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣,我很好奇如何按顺序创建PI,而不是在过程结果之后生成数字,而是让数字在过程本身生成时显示。如果是这种情况,那么数字可以自行产生,我可以对以前看到的数字实现垃圾收集,从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法,类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  3. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  4. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们? - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  5. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe? - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗?我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe,无需等待进程完成是否有任何ruby​​gems会支持我的问题? 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  6. ruby - 如何在续集中重新加载表模式? - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  7. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式? - 2

    我正在为一个项目制作一个简单的shell,我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止,我一直在使用CSV::parse_line,将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  8. ruby - 如何在 Lion 上安装 Xcode 4.6,需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby,并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

  9. ruby-on-rails - 如何在 ruby​​ 交互式 shell 中有多行? - 2

    这可能是个愚蠢的问题。但是,我是一个新手......你怎么能在交互式ruby​​shell中有多行代码?好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗?再次抱歉,如果这是一个愚蠢的问题。谢谢。 最佳答案 这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f

  10. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

随机推荐