如何修复 Flutter PageView 中的图像溢出？

Question

我正在构建一个应用程序，它在页面视图中显示标题、作者姓名、赞成票数和来自 subreddit 的图像。一切正常，但对于某些图像，页面浏览量溢出，我该如何解决？

这里是溢出错误：

这是我的代码

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class Stardew extends StatefulWidget {
  const Stardew({ Key? key }) : super(key: key);

  @override
  State<Stardew> createState() => _StardewState();
}

class _StardewState extends State<Stardew> {

  List data = [];

  Future<String> getData() async {

    List temp_data = [];

    var response = await http.get(
      Uri.parse("https://m...content-available-to-author-only...p.com/gimme/stardewvalley/100")
    );

    return response.body;
  }


  @override
  Widget build(BuildContext context) {

    return FutureBuilder(
      future: getData(),
      builder: (BuildContext context, AsyncSnapshot snapshot){

        if(snapshot.data == null){
          return Center(child: CircularProgressIndicator(color: Color(0xff008b00)));
        }

        var jsonData = jsonDecode(snapshot.data);
        jsonData = jsonData["memes"];


        return PageView.builder(
          //scrollDirection: Axis.vertical,

          itemCount: jsonData.length,
          itemBuilder: (BuildContext context, int index){

            return Center(
              child: Padding(
                padding: const EdgeInsets.all(1.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                  
                    getImgCard(
                      jsonData[index]["title"], 
                      //jsonData[index]["preview"][2],//preview image
                      jsonData[index]["url"], //original image 
                      jsonData[index]["author"], 
                      (jsonData[index]["ups"]).toString()
                    )

                  ],
                ),
              ),
            );
          },
        );
      }
    );
  }


  Widget getImage(String imgUrl){
    return Container(
      child: Image.network(
        imgUrl,
        
        fit: BoxFit.scaleDown,
        loadingBuilder: (BuildContext context, Widget child,
            ImageChunkEvent? loadingProgress) {
          if (loadingProgress == null) return child;
          return Center(
            child: CircularProgressIndicator(
              value: loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded/loadingProgress.expectedTotalBytes! : null,
              color: Color(0xff008b00),
            ),
          );
        },
      ),
    );
  }



  Widget getImgCard(String title, String imgUrl, String author, String ups){
    return Card(
      color: Color(0xff000000),
      clipBehavior: Clip.antiAlias,
      child: Column(
        children: [
          
          ListTile(
            leading: RichText(
              text: TextSpan(
                children: [
                  TextSpan(
                    text: ups,
                    
                  ),
                  const WidgetSpan(
                    child: Icon(Icons.arrow_upward, size: 18, color: Color(0xff008b00),),
                  )
                ],
              ),
            ),
            
            title: Text(title, style: TextStyle(color: Colors.white),),


            subtitle: Text(
              "Posted by u/${author}",
              style: TextStyle(color: Colors.white.withOpacity(0.6)),
            ),
          ),
          
          getImage(imgUrl),

          
          Padding(padding: EdgeInsets.only(bottom: 8))
        ],
      ),
    );
  }
}

我该如何解决这个问题？我试过改变盒子的配合，但没有用。然后我使用了扩展和灵活的小部件，但仍然找不到这个解决方案的答案。请帮助我。

Answer 1

将 getImage(imgUrl) 包裹在展开的小部件中。

Answer 2

我自己找到了答案，删除父列并用 SingleChildScrollView 包裹修复了错误。

return PageView.builder(
          //scrollDirection: Axis.vertical,

          itemCount: jsonData.length,
          itemBuilder: (BuildContext context, int index){

            return SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.all(1.0),
                child: getImgCard(
                  jsonData[index]["title"], 
                  //jsonData[index]["preview"][2],//preview image
                  jsonData[index]["url"], //original image 
                  jsonData[index]["author"], 
                  (jsonData[index]["ups"]).toString()
                ),  
              )
            );
          },
        );

如何修复 Flutter PageView 中的图像溢出？

How to fix Image overflow in Flutter PageView?

flutter

dart

flutter-layout