縮放時ListView部件不完全可見 -有解無憂

當我縮放一個水平的ListView小組件時，我觀察到，當小組件一直向右滾動時，只有一部分串列項是可見的：

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp())。
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final sideLength = 50.0;
    final scale = 2.0;

    return MaterialApp(
        scrollBehavior: MyCustomScrollBehavior()。
        首頁。Scaffold(
            體。Transform.scale(
          scale: 規模。
          對齊。Alignment(-1, -1) 。
          孩子。容器(
              height: sideLength * scale,
              孩子。ListView.builder(
                itemCount: 20,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) => Container(
                    width: sideLength,
                    height: sideLength,
                    孩子。Text(index.toString())。
                    裝飾。BoxDecoration(
                        邊界。Border.all(width: 3, color: Colors.red))。
              )),
        )));
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior{
  ///覆寫行為方法和getters，如dragDevices。
  @override{
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

在Pixel 2模擬器上，當我滾動到最右邊時，只有前16項是可見的。例如：

當比例為1時，或者如果Transform.scale小組件不存在時，所有20個專案都是可見的。

我觀察到以下行為：

最后一個專案可滾動到

總的專案數
8	4

6 6

20 1616 16

30 26 50 46

因此，最后4項似乎總是被遺漏了。

最終我的目標是創建一個回應式的小組件，并根據螢屏的尺寸進行調整。

最終，我的目標是創建一個回應式的小組件，根據螢屏的尺寸進行縮放，所以我正在尋找一個通用的解決方案。

根據這個答案，自定義滾動行為只是為了讓水平滾動在 dartpad.dev 上運行。

uj5u.com熱心網友回復：

Transform只影響到孩子應該如何被畫出來。

另一方面，scale引數使x和y軸成倍增長。

例如：想象一下，一個攝影師正在拍攝一張包含有一棵樹的風景照片，現在如果攝影師靠近這棵樹，這棵樹的上半部分將略微超出照片的范圍。

嘗試向Container添加padding或margin，觀察小組件如何受到scale的影響。然后你就會知道如何操作它了。

body: Transform.scale( scale: 規模。 align: Alignment(0, 5)。孩子。容器( height: sideLength * scale, margin: EdgeInsets.only(left: 100, right: 100）。) 孩子。ListView.builder()

uj5u.com熱心網友回復：

通過MediaQuery

在這里給出寬度和高度。

Widget build(BuildContext context) {

return MaterialApp(
    scrollBehavior: MyCustomScrollBehavior()。
    首頁。Scaffold(
        body: Transform.scale(
      scale: 規模。
      對齊。Alignment(-1, -1) 。
      孩子。容器(
          height: sideLength * scale,
          孩子。ListView.builder(
            itemCount: 20,
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) => Container(
                width: MediaQuery.of(context).size.width*0.90 ,
                高度。MediaQuery.of(context).size.height*0.80 。
                孩子。Text(index.toString())。
                裝飾。BoxDecoration(
                    邊界。Border.all(width: 3, color: Colors.red))。
          )),
    )));

}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/329332.html

標籤：

上一篇：使用VBA將多個值傳遞給ABAPTEXTFILTER

下一篇：為什么有人會在javascript中使用十六進制的方法呢？