使用定位小部件在 ListView.builder 项小部件上添加小部件

Question

我想在 Listview 项目小部件上方添加一个小部件，但它只在屏幕上显示 size.On 滚动 ListView 堆栈项目不可见。

这是我的代码：

Stack(
  children: <Widget>[
          Positioned.fill(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListView.builder(
                itemCount: 100,
                itemBuilder: (context,index){
                  return Text(index.toString());
                },

              ),
            ),
          ),


         ///In my case Emulator screen height is 600
          Positioned(
              top: 550,
              left: 100,
              child: Container(child: Text('Widget 1'),color: Colors.blue,)),

          Positioned(
              top: 650,
              left: 100,
              child: Container(child: Text('Widget 2'),color: Colors.blue,))
  ],
)

在运行此代码仅可见 Widget 1 标签。小部件 2 标签未显示在滚动列表视图上，小部件 1 标签也卡在同一位置。我想在滚动列表视图时显示小部件 2 标签并滚动小部件 1 标签。

Answer 1

您可以使用 ScrollController 实现您想要的效果。这将允许您获取滚动偏移量并将其应用于 Positionned 小部件。

这是一个基于您的代码的工作示例：

import 'dart:math';

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    _scrollController.addListener(() {
      setState(() {
        print(_scrollController.offset);
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drawing Paths',
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Positioned.fill(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: ListView.builder(
                  controller: _scrollController,
                  itemCount: 100,
                  itemBuilder: (context, index) {
                    return Text(index.toString());
                  },
                ),
              ),
            ),

            ///In my case Emulator screen height is 600
            Positioned(
                top: 550 - (_scrollController.hasClients ? _scrollController.offset : 0.0),
                left: 100,
                child: Container(
                  child: Text('Widget 1'),
                  color: Colors.blue,
                )),

            Positioned(
                top: 650 - (_scrollController.hasClients ? _scrollController.offset : 0.0),
                left: 100,
                child: Container(
                  child: Text('Widget 2'),
                  color: Colors.blue,
                ))
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

使用定位小部件在 ListView.builder 项小部件上添加小部件

Add widget on ListView.builder Item widget using Positioned widget

stack

listview

dart

flutter

flutter-layout