Flutter：帶 viewportFraction 的水平列表視圖

Question

我想實現這個水平的 ListView 效果。

計划像這樣創建一個水平的 ListView。 例如，水平 listView 將顯示 2 個項目，而 1 個項目僅顯示 20%。

滾動的時候會變成這樣。 示例前端和末端顯示 20%，中心顯示 2 個項目。

編輯：我現在使用的代碼：

viewportFraction = 1 / 2.3;

LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
  final double itemWidth =
      (constraints.maxWidth - padding.horizontal) * this.viewportFraction;
  final double itemHeight = (itemWidth * this.aspectRatio);

  return new Container(
    height: itemHeight,
    child: new ListView.custom(
      scrollDirection: Axis.horizontal,
      controller: new PageController(
        initialPage: this.initialPage,
        viewportFraction: this.viewportFraction,
      ),
      physics: const PageScrollPhysics(),
      padding: this.padding,
      itemExtent: itemWidth,
      childrenDelegate: this.childrenDelegate,
    ),
  );
});

Answer 1

最簡單的方法可能是使用水平 ListView 構建器

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection:Axis.horizontal,
      itemCount:10,
      itemBuilder:(context,index){
        return Padding(
          padding:EdgeInsets.symmetric(horizontal:MediaQuery.of(context).size.width*0.05),
          child:Container(
            color: Colors.blue,
        child:Text(index.toString()),
        height:20,
        width:MediaQuery.of(context).size.width*0.25,
        )
        );
      }
    );
  }

MediaQuery.of(context).size允許您獲取有關屏幕幾何的信息

我會讓你做一些數學運算來找到屏幕的正確部分來獲得你想要的最終結果