滚动时堆栈位置不正确 [英] Stack position inaccurate when scroll

问题描述

此问题与此

代码

 导入'package：flutter / material.dart'; 
 
导入‘blinking_dot.dart’； 
 
 void main（）=> runApp（MyApp（））; 
 
类MyApp扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return MaterialApp（
 title：'Flutter Demo'，
主题：ThemeData（
 primarySwatch：Colors.blue，
），
主页：MyHomePage（标题： Flutter演示首页），
）； 
} 
} 
 
类MyHomePage扩展了StatefulWidget {
 MyHomePage（{Key key，this.title}）：super（key：key）; 
 
最终字符串标题； 
 
 @override 
 _MyHomePageState createState（）=> _MyHomePageState（）; 
} 
 
类_MyHomePageState扩展State< MyHomePage> {
 int _counter = 0; 
双重消费； 
 double posy; 
 
 void onTapDown（BuildContext context，TapDownDetails details）{
最终的RenderBox框= context.findRenderObject（）; 
最终偏移量localOffset = box.globalToLocal（details.globalPosition）; 
 setState（（）{
 posx = localOffset.dx-7.5; 
 posy = localOffset.dy-
 MediaQuery.of（context）.padding.top-
 kToolbarHeight-
 7.5; 
}）； 
} 
 
 @override 
小部件构建（BuildContext上下文）{
 return Scaffold（
 appBar：AppBar（
 title：Text（widget .title），
），
正文：SingleChildScrollView（
子项：Column（
 crossAxisAlignment：CrossAxisAlignment.start，
子项：< Widget> [
 Stack（
子项：< Widget> [
 GestureDetector（
 onTapDown：（TapDownDetails详细信息）=> gt; 
 onTapDown（上下文，详细信息），
子级：容器（
高度：300，
宽度：400，
子对象：Image.asset（ assets / no_image.png）））），
位置（
子对象：BlinkingDot（），左侧
：posx，
顶部：posy，
 ）
]，
），
 SizedBox（高度：25），
 _showTitle（），
 SizedBox（高度：25），
 _showTitle（） ，
 SizedBox（高度：25），
 _showTitle（），
 SizedBox（高度：25），
 _showTitle（），
 SizedBox（高度：25）， 
 _showTitle（），
 SizedBox（高度：25），
 _showTitle（），
]））））; 
} 
 
小部件_showTitle（）{
 return TextField（
 style：TextStyle（fontSize：12.0），
装饰：InputDecoration（
 border：OutlineInputBorder（
 borderRadius：const BorderRadius.all（
 const Radius.circular（5.0），
）），
），
）; 
} 
} 
  

BlinkingDot

  import'package：flutter / material.dart'; 
 
类BlinkingDot扩展了StatefulWidget {
 @override 
 _BlinkingDotState createState（）=> _BlinkingDotState（）; 
} 
 
 class _BlinkingDotState扩展了State< BlinkingDot> 
和SingleTickerProviderStateMixin {
 AnimationController _animationController; 
 
 @override 
 void initState（）{
 _animationController = 
 new AnimationController（vsync：this，duration：Duration（seconds：1））; 
 _animationController.repeat（）; 
 super.initState（）; 
} 
 
 @override 
窗口小部件build（BuildContext context）{
 return FadeTransition（
 opacity：_animationController，
 child：Container（
高度：15，
宽度：15，
儿童：FloatingActionButton（
 backgroundColor：Colors.redAccent，
）））; 
} 
 
 @override 
 void dispose（）{
 _animationController.dispose（）; 
 super.dispose（）; 
} 
} 
  

解决方案

您用ScrollView包裹视图，这意味着dy值也将在滚动视图时改变。

如何获得相对于滚动位置的确切位置？

只需更改 globalPosition 到 localPosition ，并从计算表达式中删除多余的填充值。

在这里。

  box.globalToLocal（details.localPosition ）; 
 setState（（）{
 posx = localOffset.dx-7.5; 
 posy = localOffset.dy-7.5; 
}）; 
} 
  

This question is related to this post.

Why when I scroll to bottom, the dot position displayed wrongly, but when I scroll until top, it works?

Code

import 'package:flutter/material.dart';

import 'blinking_dot.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  double posx;
  double posy;

  void onTapDown(BuildContext context, TapDownDetails details) {
    final RenderBox box = context.findRenderObject();
    final Offset localOffset = box.globalToLocal(details.globalPosition);
    setState(() {
      posx = localOffset.dx - 7.5;
      posy = localOffset.dy -
          MediaQuery.of(context).padding.top -
          kToolbarHeight -
          7.5;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: SingleChildScrollView(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
              Stack(
                children: <Widget>[
                  GestureDetector(
                      onTapDown: (TapDownDetails details) =>
                          onTapDown(context, details),
                      child: Container(
                          height: 300,
                          width: 400,
                          child: Image.asset("assets/no_image.png"))),
                  Positioned(
                    child: BlinkingDot(),
                    left: posx,
                    top: posy,
                  )
                ],
              ),
              SizedBox(height: 25),
              _showTitle(),
              SizedBox(height: 25),
              _showTitle(),
              SizedBox(height: 25),
              _showTitle(),
              SizedBox(height: 25),
              _showTitle(),
              SizedBox(height: 25),
              _showTitle(),
              SizedBox(height: 25),
              _showTitle(),
            ])));
  }

  Widget _showTitle() {
    return TextField(
      style: TextStyle(fontSize: 12.0),
      decoration: InputDecoration(
        border: OutlineInputBorder(
            borderRadius: const BorderRadius.all(
          const Radius.circular(5.0),
        )),
      ),
    );
  }
}

BlinkingDot

import 'package:flutter/material.dart';

class BlinkingDot extends StatefulWidget {
  @override
  _BlinkingDotState createState() => _BlinkingDotState();
}

class _BlinkingDotState extends State<BlinkingDot>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    _animationController =
        new AnimationController(vsync: this, duration: Duration(seconds: 1));
    _animationController.repeat();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
        opacity: _animationController,
        child: Container(
            height: 15,
            width: 15,
            child: FloatingActionButton(
              backgroundColor: Colors.redAccent,
            )));
  }

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

解决方案

You wrapped the view with a ScrollView, that means the dy value will also change when you scroll the view.

How to get the exact position with respect to the scrolled position?

Simply change globalPosition to localPosition and remove extra padding values from the calculation expression.

Here you go.

    box.globalToLocal(details.localPosition);
    setState(() {
      posx = localOffset.dx - 7.5;
      posy = localOffset.dy - 7.5;
    });
  }

这篇关于滚动时堆栈位置不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！