如何在 Flutter Web 上將小部件修復到 ListView 的右側

Question

我有一個 Flutter Web 應用程序，當我單擊一個項目時，我需要在 ListView 的右側顯示一個小部件，並且這個小部件應該始終在屏幕上可見。 我可以實現我的目標，將兩者放在一行上並僅對 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 個比例部分
• 將此 Row 小部件放入高度等於屏幕高度的Container中以保持響應能力 | 使用 MediaQuery 獲取當前頁面高度
• 現在左側部分可以單獨滾動，單擊此部分中的任何選項，您可以定義右側部分的行為； 同時在整個頁面生命周期中保持左側部分不變