时间戳

首页 > 解决方案 > Flutter/ 关注 ListView 中的特定小部件

flutter - Flutter/ 关注 ListView 中的特定小部件

问题描述

我正在开发一个带有颤振的移动应用程序。

我对列表视图有疑问。

如您所见，在 ManageAnnouncementMainScreen 小部件中获得了一个名为 selectedNumber 的道具。

我想做的是，当我导航到这个小部件时，自动关注与 selectedNumber 匹配的小部件。在此处输入图像描述

这是初始屏幕。例如，如果我将 8 作为参数传递给此屏幕，我想让初始屏幕显示中间有数字 8 的小部件。就是这样。对不起，我的英语很差，我希望你明白这个问题的意义。

我只是想知道这在技术上是否可行，如果可能，请让我知道该解决方案或我可以研究的任何链接。

谢谢阅读。

我在等你的帮助。

class ManageAnnouncementMainScreen extends StatefulWidget {
  ManageAnnouncementMainScreen({Key key, @required this.selectedNumber})
      : super(key: key);
  final int selectedNumber;

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

class _ManageAnnouncementMainScreenState
    extends State<ManageAnnouncementMainScreen> {
//Variable ——————————————————————————————————
  Authentication authentication;
  List<TestingBox> boxes = [
    TestingBox(
      colorCode: 1,
    ),
    TestingBox(
      colorCode: 2,
    ),
    TestingBox(
      colorCode: 3,
    ),
    TestingBox(
      colorCode: 4,
    ),
    TestingBox(
      colorCode: 5,
    ),
    TestingBox(
      colorCode: 6,
    ),
    TestingBox(
      colorCode: 7,
    ),
    TestingBox(
      colorCode: 8,
    ),
    TestingBox(
      colorCode: 9,
    ),
    TestingBox(
      colorCode: 10,
    ),
    TestingBox(
      colorCode: 11,
    ),
    TestingBox(
      colorCode: 12,
    ),
  ];

  //—————————————————————————————————— Variable

//Functions——————————————————————————————————
  buildBody() {
    return Container(
      child: ListView(children: boxes),
    );
  }

//——————————————————————————————————Functions

  @override
  Widget build(BuildContext context) {
    authentication = Provider.of<Authentication>(context, listen: true);
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      body: buildBody(),
    );
  }
}

class TestingBox extends StatefulWidget {
  const TestingBox({
    Key key,
    @required this.colorCode,
  }) : super(key: key);
  final int colorCode;

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

class _TestingBoxState extends State<TestingBox> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        height: 150,
        color: getPositionColor(widget.colorCode),
        child: Center(
          child: Text(
            widget.colorCode.toString(),
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

标签： flutter

解决方案

最好的方法是使用Google 团队开发的scrollable_positioned_list包。

然后你可以定义一个 ItemScrollController：

final ItemScrollController itemScrollController = ItemScrollController();

在 中initState()，执行以下操作：

itemScrollController.jumpTo(index: widget.selectedNumber);

在列表视图中使用 itemScrollController：

return ScrollablePositionedList.builder(
  itemCount: boxes.length,
  itemBuilder: (context, index) => boxes[index],
  itemScrollController: itemScrollController,
);

如果您仍想坚持使用原始 ListView，那么您可以启动 ListView 位置的一种方法是使用 ScrollController。像这样的东西：

ScrollController _scrollController = ScrollController();
var itemHeight = 150.0; // Example height of item

@override
initState() {
  _scrollController = ScrollController(
      initialScrollOffset: itemHeight * widget.selectedNumber);
  super.initState();
}

推荐阅读