Flutter/ 关注 ListView 中的特定小部件答案

【问题标题】：Flutter/ Focus on specific widget in ListViewFlutter/ 关注 ListView 中的特定小部件
【发布时间】：2021-03-31 20:22:41
【问题描述】：

我正在用 Flutter 开发一个移动应用。

我对列表视图有疑问。

如您所见，在 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: Scrolling to a widget in ListView

标签： flutter

【解决方案1】：

最好的方法是使用谷歌团队开发的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();
}

【讨论】：