Flutter - 如何在SingleChildScrollView中添加 "中间光标"?

问题描述 投票:0回答:1

我在我的flutter应用程序中使用SingleChildScrollView,我需要在我的滚动部件的中心(通过垂直方向)添加 "中间光标"。我需要在我的滚动部件的中心(垂直)添加 "中间光标"。这是我的代码。

Widget _getBody(context) {
return GestureDetector(
  //onScaleStart: _onScaleStart,
  //onScaleUpdate: _onScaleUpdate,
  child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Stack(
        children: <Widget>[
          Row(
            children: List.generate(
                30,
                (i) => Padding(
                      padding: const EdgeInsets.all(2.0),
                      child: new Container(
                        height: 42.0,
                        width: 42.0,
                        color: _getColor(i),
                      ),
                    )).toList(),
          ),
          Positioned(
            left: _getLeftPosition(context),
            top: 0,
            bottom: 0,
            child: Container(
              color: Colors.red,
              width: 2,
            ),
          ),
        ],
      )),
);


_getLeftPosition(BuildContext context) {
 double width = (MediaQuery.of(context).size.width) / 2;
 return width;
}

Color _getColor(int i) {
if (i < 10) {
  return Colors.green;
 }
 if (i < 25) {
   return Colors.orange;
 } else
   return Colors.blueGrey;
 }

这是结果:

enter image description here

我可以向左或向右滚动我的列表。我需要光标保持在中心位置。

我可以通过计算_getLeftPosition()中的变量来更新我的widget,但我不知道如何计算隐藏在左侧的长度。

有什么技巧吗?

enter image description here

flutter dart flutter-layout
1个回答
0
投票

我解决了这个问题,我添加了NotificationListener。这是我的代码。

 class _TestMiddleState extends State<TestMiddle> {
  double before = 0;
  double halfWidth;
  double leftPosition;

  @override
  Widget build(BuildContext context) {
    halfWidth = (MediaQuery.of(context).size.width) / 2;
    return Scaffold(
      appBar: AppBar(),
      body: _getBody(context),
    );
  }

  Widget _getBody(context) {
    if (before == 0) leftPosition = halfWidth;
    return NotificationListener<ScrollNotification>(
      onNotification: (scrollNotification) {
        if (scrollNotification is ScrollEndNotification) {
          var m = scrollNotification.metrics;
          before = m.extentBefore;
          setState(() {
            leftPosition = halfWidth + before;
          });
          return false;
        }
        return false;
      },
      child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Stack(
            children: <Widget>[
              Row(
                children: List.generate(
                    30,
                    (i) => Padding(
                          padding: const EdgeInsets.all(2.0),
                          child: new Container(
                            height: 42.0,
                            width: 42.0,
                            color: _getColor(i),
                          ),
                        )).toList(),
              ),
              Positioned(
                left: leftPosition,
                top: 0,
                bottom: 0,
                child: Container(
                  color: Colors.red,
                  width: 2,
                ),
              ),
            ],
          )),
    );
  }


}
© www.soinside.com 2019 - 2024. All rights reserved.