首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在终端抽屉中添加多个ListTile而不会在颤动中滚动?

要在终端抽屉中添加多个ListTile而不会在颤动中滚动,可以使用ListView或ListView.builder来实现。

ListView是一个可滚动的列表,可以直接将多个ListTile放入其中。以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyDrawer(),
    );
  }
}

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drawer'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // 点击Item 1的操作
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // 点击Item 2的操作
              },
            ),
            ListTile(
              title: Text('Item 3'),
              onTap: () {
                // 点击Item 3的操作
              },
            ),
            // 添加更多的ListTile
          ],
        ),
      ),
      body: Center(
        child: Text('Home Page'),
      ),
    );
  }
}

在上面的示例中,我们在Drawer的child中使用了ListView来包裹多个ListTile。这样就可以在抽屉中添加多个ListTile了。

如果需要动态生成大量的ListTile,可以使用ListView.builder。ListView.builder根据指定的itemBuilder来动态生成列表项,只会生成当前可见区域的列表项,可以提高性能。以下是一个使用ListView.builder的示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyDrawer(),
    );
  }
}

class MyDrawer extends StatelessWidget {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drawer'),
      ),
      drawer: Drawer(
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
              onTap: () {
                // 点击列表项的操作
              },
            );
          },
        ),
      ),
      body: Center(
        child: Text('Home Page'),
      ),
    );
  }
}

在上面的示例中,我们使用ListView.builder来动态生成列表项。通过设置itemCount为items的长度,itemBuilder根据index来生成对应位置的列表项。

这样就可以在终端抽屉中添加多个ListTile而不会在颤动中滚动了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 可折叠边栏

一个可在Flutter应用创建可折叠的侧边栏导航抽屉的 Flutter 插件。...Flutter使开发人员可以轻松使用导航抽屉,而无需其他人就无需编写大部分代码。 在本博客,我们将探讨Flutter 的**可折叠侧边栏。...它是一个向左滑动的菜单,在大多数情况下,它包含应用程序的重要连接,并且在显示时拥有一半的屏幕。 该演示视频展示了如何在Flutter创建可折叠的侧边栏。...在此小部件,我们将添加中心小部件。在内部,我们将添加一个列小部件。在列小部件,我们将添加两个文本,并且mainAxisAlignment为中心。...在此小部件,我们将添加一个列小部件。在内部,我们将添加图像,文本和ListTile。我们将添加三个带有图标和文本的ListTile

6.3K50
  • Flutter 构建完整应用手册-设计基础知识 顶

    这本食谱包含演示如何在写Flutter应用程序时解决常见问题的食谱。 每个配方都是独立的,可以作为参考帮助您构建应用程序。...路线 将字体添加到包 将包和字体添加到我们的应用程序 使用字体 1.将字体添加到包 要从包中导出字体,我们需要将字体文件导入到我们包项目的lib文件夹。...添加一个抽屉到屏幕上 在采用Material Design的应用,导航有两个主要选项:选项卡和抽屉。 当没有足够的空间来支持标签时,抽屉提供了一个方便的选择。...尽管我们可以使用Column部件,但ListView在这种情况下很方便,因为如果内容占用的空间比屏幕支持的更多,它将允许用户滚动抽屉。...当用户打开抽屉时,Flutter会将抽屉添加到引擎盖下的导航堆栈。 因此,要关闭抽屉,我们可以调用Navigator.pop(context)。

    7.1K10

    开始使用-编写你的第一个Flutter应用程序 顶

    终端:运行flutter格式。 1.替换lib/main.dart。 删除lib/main.dart的所有代码。...这个类将保存随着用户滚动而无限增长的生成的单词对,以及最喜欢的单词对,因为用户通过切换心脏图标来将它们从列表添加或删除。 你会一点一点地建立这个类。...新页面的内容是使用匿名函数在MaterialPageRoute的builder属性构建的。 将呼叫添加到Navigator.push,突出显示的代码所示,将路由推送到导航器的堆栈。...现在,添加生成ListTile行的代码。 ListTile的divideTiles()方法在每个ListTile之间添加水平间距。...材质库的Colors类提供了许多可以使用的颜色常量,热重载使得用户界面的实验变得快速简单。 ? 问题? 如果您的应用程序运行不正常,则可以使用以下链接的代码重新进入正轨。

    9.5K20

    Flutter之drawer详细分析(你要的操作都有)

    ListView => 装载抽屉的部件 DrawerHeader =>抽屉的头部 SizeBox => 用于限制CircleAvatar的大小 CircleAvatar => 头像部件 ListTile...image.png 可以直接点击ListView的构造方法,跳转到455行可看到 1.当ListView的属性padding为空时,获取MediaQueryData的信息 2.因为ListView的滚动方向默认为垂直...,上面的两个复制: mediaQueryHorizontalPadding =>将原有的MediaQuery的padding复制为top和bottom都为0,该值会被子部件使用,所以可以知道,DrawerHeader...我们成功的修改了Drawer弹出的大小 5.监听Drawer的弹出和关闭 监听Drawer这里官方给我们埋了一个坑 监听我们以Tab为例,Flutter会给我我们一个XXXController部件,Drawer...image.png 当我点击AppBar左边的按钮是发现,弹出了一个蒙版,Drawer并没有弹出来,这是怎么回事?别急,我们开启一下布局边界 ?

    4.2K21

    UITableView在Flutter是什么?

    我定义了一个拥有100个列表元素的ListView,在列表项的创建方法,分别将index的值设置为ListTile的标题与子标题。...但是,对于某些特殊交互场景,比如多个效果联动、嵌套滚动、精细滑动、视图跟随手势操作等,还需要嵌套多个ListView来实现。...在Flutter,有一个专门的控件CustomScrollView,用来处理多个需要自定义滚动效果的Widget。...对于前两个问题,我们可以使用ScrollController进行滚动信息的监听,以及相应的滚动控制;最后一个问题,则需要接收ScrollNotification通知进行滚动事件的获取。...与ScrollController不同的是,NotificationListener是一个Widget,为了监听滚动类型的事件,我们需要将NotificationListener添加为ListView的父容器

    5.6K10

    【Flutter】自定义滚动开关

    本文中,我们将探讨Flutter 的**Custom Rolling Switch in Flutter。...该演示视频展示了如何在颤动创建自定义滚动开关。它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...它显示了在用户按下按钮后进行的切换交互,该开关将滚动到具有动画效果的另一侧,并且在滚动该开关时将更改图标和文本。...在小部件内,我们将添加一个列小部件。在此小部件,我们将添加mainAxisAlignment为center。在内部,我们将添加带有样式的文本。...我们将添加animationDuration手段来延迟动画的开始并添加onChanged表示用户打开或关闭开关的时间。当我们运行应用程序时,我们应该获得屏幕的输出,屏幕下方的截图所示。

    33.4K60

    Flutter | 滚动组件,ListView,GridVIew等

    ,如果子树滚动组件没有显示的指定,则会使用这个默认的。...风格的滚动指示器(滚动条),如果要给可滚动组件添加滚动条,只需要将 Scroolbar 作为可滚动组件的任意一个父级组件即可,: Scrollbar( child: SingleChildScrollView...可滚动组件中有很多都支持 Sliver 的延时构建模型, ListView,GridView ,但是也有不支持改模型的 SingleChildScrollView 主轴和纵轴 在滚动组件的坐标描述,...其实此属性的本质上是决定可滚动组件的初始滚动位置是在 头 还是在 尾 , false 时,初始位置在头,反之则在 尾 primary:指是否使用 widget 树默认的 PrimaryScrollController...如果有用到其他的组件,则减去其高度即可 SizedBox( //Material ,状态类,导航栏,ListTile 高度分别是 24,56,,5 height: MediaQuery.of(

    8.5K20

    前端节流(throttle)和防抖动(debounce)

    所以我们要给这个 button 添加节流函数,防止一些无意义的点击响应。 节流实现 节流的实现就要用到 js 高阶函数了。...,滚动到底部了,数据正在加载,用户重复触发滚动到底部,这时就需要节流,没加载完之前,不会触发第二次  这里的cb就是被执行的回调函数,wait是设定的时间间隔。...(this, args); timeId = undefined; }, wait) } } 防抖动(debounce) 所谓的抖动就是浏览器频繁布局时,由于算力不足导致的页面颤动现象...但事实上在这类场景里,有价值的请求只会发生在用户停止输入后,通俗来说就是用户输入过程的字符串不必当真。 Debounce 就是用来过滤输入过程无意义的响应。...timeout),则能被callNow,便会立即执行 cb(不会在 setTimeout 里执行)。其他实现与普通 debounce 相同。

    3.4K20

    Flutter 滚动监听及实战appBar滚动渐变的实现

    一个 ScrollController 对象可能会被多个滚动的组件使用, ScrollController 会为每一个滚动组件创建一个 ScrollPosition 对象来存储位置信息。...真正保存位置信息的就是 ScrollPosition, offset 只是一个便捷使用的属性。...double get offset = position.pixels; 一个ScrollController虽然可以对应多个滚动组件,但是读取滚动位置offset,则需要一对一读取。...滚动通知 Flutter 很多地方使用了通知,滚动组件(Scrollable Widget)滑动时就会分发滚动通知(ScrollNotification),Scrollbar正是通过监听ScrollNotification...: Duration(milliseconds: 500), curve: Curves.ease); }, ), ) 创建ScrollController对象,在初始化添加滚动的监听

    2.8K20

    Flutter 布局常用的 widgets(Common layout widgets)

    GridView 将多个widget放在一个可滑动的表格。 ListView 将多个widget放在一个可滑动的列表。 Stack 在一个widget上面盖上另一个widget。...ListTile 一个Row中装载最多3行文字;可选则在前面或尾部添加图标。 Container Container用法比较自由。...GridView 用GridView来将widget放入一个2维的列表。 GridView提供了2个预装配好的列表,也可以自己建立自定义列表。 GridView支持滚动。...GridView 小结: 将多个widget放进一个表格 当超出渲染范围时,自动提供滚动功能 可自定义格子,也可用下面提供的2种 GridView.count 指定列的数目 GridView.extent...ListView 小结 把子视图装进列表 水平或竖直都可以 支持滑动 相比于Column,可选配置比较少,但更易用并且支持滑动 和Android的ListView差别不大 示例1 把ListTile

    1.3K30

    Flutter可滑动组件

    因为默认构造器接收了一组明确的Widget,构造这组Widget时会一次性将所有子组件都初始化,不是只初始化那些可见的Widget,即默认构造器不存在懒加载功能。...1.3 ListTile 在开发,我们经常见到一种列表,有一个图标或图片(Icon),有一个标题(Title),有一个子标题(Subtitle),还有尾部一个图标(Icon)。...如果我们想要在一个页面,同时包含多个滚动组件,且使它们的滑动效果能统一起来,比如一个滑动的视图中包括一个列表视图(ListView),一个网格视图(GridView),且让他们的滑动效果统一。...Flutter中有一个可以完成这样滚动效果的Widget:CustomScrollView,其成员变量slivers可以接收一组Sliver,从而达到统一管理多个滚动视图的目的。...比如视图滚动到底部时,我们可能希望做上拉加载更多;比如滚动到一定位置时显示一个回到顶部的按钮,点击回到顶部的按钮,回到顶部;比如监听滚动什么时候开始,什么时候结束; 在Flutter监听滚动相关的内容由两部分组成

    7.1K30

    Flutter开发-可滚动组件

    我们先介绍一下常用的可滚动组件(ListView、GridView等) SingleChildScrollView SingleChildScrollView类似于Android的ScrollView...,本章第一节已经介绍过,不再赘述;第二组是ListView各个构造函数(ListView有多个构造函数)的共同参数,我们重点来看看这些参数,: itemExtent:该参数如果不为null,则会强制children...当可滚动组件滚动时,将列表项包裹在RepaintBoundary可以避免列表项重绘,但是当列表项重绘的开销非常小(如一个颜色块,或者一个较短的文本)时,不添加RepaintBoundary反而会更高效...是不行的,因为它们本身是可滚动组件并不是Sliver!...实际上Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型(自身不能再滚动),而后者包含滚动模型 ,也正因如此,CustomScrollView才可以将多个Sliver

    4.5K20

    Flutter的html内容加载

    上一篇文章Flutter 的下拉刷新和上拉加载,我介绍了如何在Flutter实现下拉刷新和上拉加载的效果,今天我们继续以上文中的代码为例,来介绍如何加载HTML文档内容。..._requestData(); //监听滚动条的滚动事件 _scrollController.addListener(() { // print(_scrollController.position.pixels...); //滚动的距离 // print(_scrollController.position.maxScrollExtent); //最大滚动范围 //当滚动到最底部的时候,加载新的数据...是最后一个ListTile, * 此时需要上拉加载新的数据,因此要在最底部显示一个加载的圈圈 */...需要注意的是: 1, 要在你的 info.plist添加 io.flutter.embedded_views_preview 如果不添加,则会报错误: [VERBOSE

    16.6K43

    Flutter的操作提示

    在前面的文章我们学习了Flutter输入以及选择控件的用法,借助于这些组件大家可以完成很多常用的功能,但是他不能及时在用户操作后完成相应的界面提示,所以今天我们就会来看下Flutter的操作提示。...在原生客户端有着几种常用的用户提醒方式,Dialog、Snackbar、BottomSheet等,今天我们就来介绍下Flutter几种常用的提醒方式。...这样一来我们就把这个DIalog给显示出来了,在构造方法我们可以看出需要传入的是children对象,也就是你可以根据自己的需要传入多个Widget对象。...,), new ListTile( leading: new Icon(Icons.android), title: new Text("andrpid"),), new ListTile( leading...- SnackBar可以快捷的在底部显示提示Tips 使用showAlert方法可以显示SimpleDialog、AlertDialog和AboutDialog 使用BottomSheet可以实现底部抽屉的效果

    2.1K30
    领券