Flutter - 如何将“中间光标”添加到 SingleChildScrollView？答案

【问题标题】：Flutter - How add "middle cursor" to SingleChildScrollView?Flutter - 如何将“中间光标”添加到 SingleChildScrollView？
【发布时间】：2020-08-31 03:54:20
【问题描述】：

我在我的颤振应用程序中使用 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;
 }

结果是：

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

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

有什么建议吗？

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

我解决了这个问题，我添加了 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,
                ),
              ),
            ],
          )),
    );
  }


}

【讨论】：