标签: flutter-listview

如何找出当前visible或invisible在 中的项目ListView？
例如，我有 100 个项目ListView，当我滚动到屏幕或列表顶部时，我想检测哪些项目从视口中出现或消失。

插图：

在我的应用程序的这一部分中ListView，当我运行应用程序时，出现此错误并且无法解决：

Scaffold(
  body: Directionality(
textDirection: TextDirection.rtl,
child: Container(
  child: StreamBuilder(
    stream: globals.database.ticketsDao.getTicketsStream(),
    builder: (BuildContext context, AsyncSnapshot<List<Tickets>> snapshot) {
      if (snapshot.hasData) {
        return Column(
          children: <Widget>[
            Expanded(
              child: ListView.separated(
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Flexible(
                        child: Text(
                          snapshot.data[index].subject,
                          style: Theme.of(context).textTheme.caption.copyWith(fontFamily: 'IranSansBold'),
                        ),
                      ),
                      subtitle: Text(
                        snapshot.data[index].description,
                        style: Theme.of(context).textTheme.caption.copyWith(fontFamily: 'IranSansLight'),
                      ),
                    );
                  },
                  separatorBuilder: (context, index) {
                    return Divider();
                  },
                  itemCount:  snapshot.data.length),
            ),
          ],
        );
      } else {
        return Container(
            child: Center(
          child: Text(
            Strings.notAnyTickets,),
          ),
        ));
      } …

默认情况下，flutter在 iosoverscroll上添加了一个效果ListView/GridView/...

我想完全或在一个特定的滚动条上删除此效果。

我能做什么 ？

我不明白CustomScrollView正常工作。

在 flutter 2.13.0-0.2.pre 之前，点击 a 内的 TextFieldsCustomScrollView在打开时自动调整键盘上方的 TextField。

将我的 flutter 版本降级到2.11.0-0.1.pre并在 上运行应用程序时Android version 11，滚动视图按预期工作 - 即使没有Scaffold通过添加来调整小部件resizeToAvoidBottomInset: false- 当用户点击 TextField 时，键盘就会出现，用户可以按预期滚动到底部。

然而升级到 Flutter 3.0.0 后，情况发生了变化。当我点击文本字段并且键盘出现时，我无法滚动到屏幕底部。事实上，滚动根本不起作用。

这是一个非常长的表单示例，包含大约 26 个文本字段。点击第 25 个文本字段将打开覆盖该文本字段的键盘。

@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    backgroundColor: const Color(0xff185C66),\n    resizeToAvoidBottomInset: true,\n    body: CustomScrollView(\n      shrinkWrap: true,\n      clipBehavior: Clip.antiAlias,\n      controller: ScrollController(),\n      scrollDirection: Axis.vertical,\n      slivers: [\n        SliverPadding(\n          padding: EdgeInsets.symmetric(horizontal: App.sidePadding),\n          sliver: SliverList(\n            delegate: SliverChildListDelegate.fixed([\n              SafeArea(\n                bottom: …

我是颤振新手。我正在使用底部导航视图。在Dashboard类中，有底部导航。底部导航的第一个是具有选项卡视图的Home类。tabview 的第一页是NewRequest类。当应用程序首次运行时，选项卡视图的第一页不会加载，但是当进入其他类并返回 Home 时，会加载新请求。应用程序首次运行时如何加载tabview首页？我已实施如下：

class Dashboard extends StatefulWidget{

@override
 State<StatefulWidget> createState() {
   return _DashboardState();
 }

}
 class _DashboardState extends State<Dashboard>{

int _currentIndex=0;
bool home=true;
final tabs=[
 Home(),
 Center(child: Text('History')),
 Center(child: Text('Wallet')),
   Center(child: Text('More')),
  ];

 final _title=[
  Center(child: Text("Dashboard"),),
  Center(child:Text("History"),),
  Center(child:Text("Wallet"),),
  Center(child:Text("More"),),];


  @override
   Widget build(BuildContext context) {
    return Scaffold(
        appBar: home ? null :AppBar(
         title: _title[_currentIndex],
         automaticallyImplyLeading: false,
    ),
    body: Container(
    child: tabs[_currentIndex],
  ),
  bottomNavigationBar: _bottomNavigationBar(),
);
}

Widget _bottomNavigationBar(){
 return …

我正在从服务器 API 获取数据，数据已成功从服务器获取，但问题是当数据提供给 Listview 时无法显示。如何在 flutter/dart 中显示 Listview 上的数据？

以下是从服务器 API 获取数据的代码

  List<String> jobTitles = [];
  List officeNames = [ ];
  List officeLocations = [ ];
  List jobTypes = [ ];

  Future getJobsData() async {
    var response = await http
        .get(Uri.https('hospitality92.com', 'api/jobsbycategory/All'));
    Map<String, dynamic> map = json.decode(response.body);
    List<dynamic> jobData = map["jobs"];

    if (jobTitles.length != 0) {
      officeNames.clear();
      jobTitles.clear();
      officeLocations.clear();
      jobTypes.clear();
    }
    for (var i = 0; i < jobData.length; i++) {
      jobTitles.add(jobData[i]["title"]);
      officeNames.add(jobData[i]["company_name"]);
      officeLocations.add(jobData[i]["company_name"]);
      jobTypes.add(jobData[i]["type"]);
    }

    /* print(jobTitles);
    print(officeNames);
    print(officeLocations); …

我有一个 ExpansionTile 列表，抽屉里有一个 ListTile 列表。我想要实现的是，当我按下一个 ExpansionTile 时，另一个 ExpansionTile 必须折叠。我被这个问题困扰了两天，找不到答案。有人知道如何以编程方式折叠 ExpansionTile 吗？

笔记：

我不想弄乱小部件的动画。

这是我的代码，

ListView.builder(
                itemCount: userList.length,
                shrinkWrap: true,
                itemBuilder: (BuildContext context, findex) {
                  return ExpansionTile(
                    key: Key(findex.toString()),
                    title: Text(userList[findex].parentdata[0].title,
                      style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold,color: Colors.black),
                    ),
                    onExpansionChanged: (value) {
                    },
                    children: [
                      ListView.builder(
                        itemCount: userList[findex].document.length,
                        shrinkWrap: true,
                        itemBuilder: (BuildContext context, sindex) {
                          return ListTile(
                            title: Text(
                                userList[findex].document[sindex].title,
                              style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold,color: Colors.black),
                            ),
                            onTap: () {
                              print(
                                  userList[findex].document[sindex].title);
                            },
                          );
                        },
                      ),
                    ],
                  );
                },
              ),

我将以下元素封装到ListView我的材料应用程序中：

        home: Scaffold(\n            appBar: AppBar(title: const Text("Flutter Layout")),\n            body: ListView(children: [\n              fibonacciSection,\n              // a ListView supports app body scrolling when the app is run on a small device.\n              Image.asset("images/lake.jpg",\n                  width: 600,\n                  height: 240,\n                  fit: BoxFit\n                      .cover), // BoxFit.cover tells the framework that the image should be as small as possible but cover its entire render box.\n              titleSection,\n              buttonsSection,\n              textSection,\n              statesSection\n            ])));\n

当我运行包含以下代码片段的单元测试时：

    await tester.pumpWidget(const MyApp(key: Key("StateManagemetTests")));\n    final listFinder = find.byType(Scrollable);\n    final itemFinder = find.byType(TapboxB);\n    // …

我想要一个具有固定数量项目的可滚动视图。第一个项目应覆盖父容器，然后用户可以向下滚动以查看其余项目。

我尝试将 Expanded 添加到第一项，但出现白屏

  ListView(
    children: <Widget>[
      Expanded(child: MainInfo(),),
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),    
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),  
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),  
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),   
    ],
  ),

我应该使用 ListView 还是 SingleChildScrollView （也不适用于 Expanded）？

我正在尝试构建列表，您可以在其中添加有限的项目（因此两侧不是无限的）。在顶部，您将进行刷新，它将加载新项目，但您将停留在同一位置（新项目位于您当前位置的顶部）。在底部你会加载更多但相同的，留在同一个地方。我尝试过使用 CustomScrollView 和两个带中心的条子来执行此操作，但我想做的是在刷新时我想删除一些旧项目，发生的情况是它跳转到新的中心并刷新卡片。就是上面那个点。

当前状态

CustomScrollView(
                physics: const BouncingScrollPhysics(
                  parent: AlwaysScrollableScrollPhysics(),
                ),
                center: _mainListKey,
                controller: scrollController,
                cacheExtent: 1000,
                slivers: <Widget>[
                  SliverList(
                      delegate: SliverChildBuilderDelegate(
                        (BuildContext context, int index) {
                     return ComplexWidget(item: topItems[index]),
                  },
                  childCount: topItems.count,
                  ),),
                   SliverList(
                      key:  _mainListKey
                      delegate: SliverChildBuilderDelegate(
                        (BuildContext context, int index) {
                     return ComplexWidget(item: bottomItems[index]),
                  },
                  childCount: bottomItems.count,
                  ),),
                ]
              ),

更好的行为描述：

好吧，想象一下 Twitter 应用程序中的相同列表。如果你向下滚动，它将加载越来越多、越来越旧的推文。有时，它会加载后台较新的项目，这些项目会加载到顶部，而不会让您滚动。最后，您可以转到顶部并拉动刷新，它将下载新项目（Twitter 中存在差异），并将项目添加到您的位置之上。

所以有3个触发器：

1. 向下滚动以加载更多指示器
2. 拉动刷新
3. 后台自动刷新

其中任何人都不应该让你改变立场