如何在 Flutter Web 上将小部件固定到 ListView 的右侧

Question

我有一个 Flutter Web 应用程序，当我单击某个项目时，我需要在 ListView 的右侧显示一个小部件，并且该小部件应始终在屏幕上可见。我可以实现我的目标，将两者放在 Row 上并仅对 ListView 使用可滚动，但这需要 ListView 由具有定义高度的小部件包裹。

当我调整浏览器大小时，定义一个具有高度的容器来包裹 ListView 会破坏响应能力，因为该容器不适合屏幕的高度。

我想到使用 ListView 的 ShrinkWrap 属性，这样我就不必将其包装在具有预定义高度的小部件中，但这使得整个 Row 可以垂直滚动，最终导致小部件离开视口。

如果有人知道如何将这个右侧小部件固定在屏幕上，以便我可以在不失去响应能力的情况下实现我的目标，我将不胜感激。

这与我到目前为止所得到的类似：

class PageLayout extends StatefulWidget {
  const PageLayout({Key? key, required this.items}) : super(key: key);

  final List<String> items;

  @override
  State<PageLayout> createState() => _PageLayoutState();
}

class _PageLayoutState extends State<PageLayout> {
  final rightSideWidget = Container(
      decoration: BoxDecoration(
        color: Colors.red,
        border: Border.all(color: Colors.white, width: 2),
      ),
      height: 200);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.49,
              child: ListView.builder(
                shrinkWrap: true,
                itemBuilder: (context, index) => Container(
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    border: Border.all(color: Colors.white, width: 2),
                  ),
                  height: 200,
                  child: Center(
                    child: Text(
                      widget.items[index],
                      style: const TextStyle(color: Colors.white),
                    ),
                  ),
                ),
                itemCount: widget.items.length,
              ),
            ),
            Expanded(child: rightSideWidget),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

我希望 rightSideWidget 始终位于屏幕中央或跟随滚动。

Answer 1

您可以将屏幕分为两部分，右部分和左部分；从而能够控制两个部分中小部件的行为。

• 使用 Row 将整个屏幕分成 2 个按比例的部分
  将此行小部件
• 放入高度等于屏幕高度的容器内，以保持响应能力 |使用 MediaQuery 获取页面的当前高度
• 现在左侧部分可以单独滚动，并且单击此部分中的任何选项时，您可以定义右侧部分的行为；同时在整个页面生命周期中保持左侧部分不变