水平列表视图/网格视图中不同尺寸的图像，在颤动中具有固定高度和动态宽度

Question

我想创建一个水平的 ListView 或 GridView，图像的高度是固定的，但 图像的宽度应该是动态的。

以下是我正在尝试执行但无法获得预期输出的代码。我还添加了说明预期输出的设计截图

带列表视图

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';


class ViewPager extends StatefulWidget {
  createState() => _ViewPager();
}

class _ViewPager extends State<ViewPager> {

  static final exercise_image1 = "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l";
  static final exercise_image2 = "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri";


  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          _imagesList(images: [exercise_image1, exercise_image2]),
        ],
      ),
    );
  }



  Widget _imagesList({List<String> images}) {

    return Container(
      width: double.maxFinite,
      height: 150,
      color: Colors.red,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          _imageListItem(imagePath: images.first),
          _imageListItem(imagePath: images.last),
        ],
      ),
    );

  }

  Widget _imageListItem({@required String imagePath}) {

    return CachedNetworkImage(
      width: 200, // I want this to be according to the image width
      imageUrl: imagePath,
      placeholder: (context, url) => Container(
        child: CircularProgressIndicator(),
      ),
      imageBuilder: (context, imageProvider) => Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: imageProvider,
              fit: BoxFit.fitHeight
          ),
        ),
      ),
    );

  }

}

带有网格视图

与网格视图相同的问题，我们设置了网格视图的高度，但无法为图像提供动态宽度

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';


class ViewPager extends StatefulWidget {
  createState() => _ViewPager();
}

class _ViewPager extends State<ViewPager> {

  static final exercise_image1 = "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l";
  static final exercise_image2 = "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri";


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          height: 200,
          child: _imagesList(images: [exercise_image1, exercise_image2]),
        ),
      ),
    );


  }


  Widget _imagesList({List<String> images}) {

    return GridView.count(
      crossAxisCount: 1,
      scrollDirection: Axis.horizontal,
      children: [
        _imageListItem(imagePath: images[0]),
        _imageListItem(imagePath: images[1]),
      ],
    );

  }

  Widget _imageListItem({@required String imagePath}) {

    return CachedNetworkImage(
      imageUrl: imagePath,
      placeholder: (context, url) => Container(
        child: CircularProgressIndicator(),
      ),
      imageBuilder: (context, imageProvider) => Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: imageProvider,
              fit: BoxFit.fitHeight
          ),
        ),
      ),
    );

  }

}

Answer 1

实现这一点的一种方法是这样的。

class _MyWidgetState extends State<MyWidget> {
  static final exercise_image1 = "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l";
  static final exercise_image2 = "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          height: 200,
          child: _imagesList(images: [exercise_image1, exercise_image2]),
        ),
      ),
    );
  }

  Widget _imagesList({List<String> images}) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: [
        _imageListItem(imagePath: images[0]),
        _imageListItem(imagePath: images[1]),
      ],
    );
  }

  Widget _imageListItem({@required String imagePath}) {
    return CachedNetworkImage(
      imageUrl: imagePath,
      placeholder: (context, url) => Container(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

Answer 2

尝试像这样使用列表视图。它给出了你想要的输出。

     @override
  Widget build(BuildContext context) {
    Widget _imageListItem({@required String imagePath}) {
      return   CachedNetworkImage(
        imageUrl: imagePath,
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
      );
    }
    Widget horizontalList1 = new Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      height: 200.0,
      child:
      ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          _imageListItem(imagePath: exercise_image1),
          SizedBox(width: 2,),
          _imageListItem(imagePath: exercise_image2),

        ],
      ),
    );
    return new Scaffold(
      body: new Center(
        child: new Container(
          child: ListView(
            scrollDirection: Axis.vertical,
            children: <Widget>[
              horizontalList1,
            ],
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }}

Answer 3

您所说的是纵横比，您希望它适合宽度。

在图片小部件中，将fit设置为BoxFit.fitWidth，问题就解决了。

阅读更多相关信息here。

Answer 4

试试这个代码：

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class ViewPager extends StatelessWidget {
  const ViewPager({Key key}) : super(key: key);

  static final exerciseImages = [
    "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l",
    "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l",
    "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l",
    "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri",
    "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri",
    "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri",
    "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri",
    // add more image url here. anything you want.
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 150,
          padding: EdgeInsets.all(12),
          // shuffled to make it a lot more dynamic. demonstration only
          child: _imagesList(images: exerciseImages..shuffle()),
        ),
      ),
    );
  }

  Widget _imagesList({List<String> images}) {
    return ListView.builder(
      physics: BouncingScrollPhysics(), // just for coolness.
      itemCount: images.length,
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) {
        return _imageListItem(imagePath: images[index]); // access each images by their index.
      },
    );
  }

  Widget _imageListItem({@required String imagePath}) {
    return Padding(
      padding: const EdgeInsets.all(4), // add padding so the edges of the image is clearly distinguishable.
      child: CachedNetworkImage(
        imageUrl: imagePath,
        placeholder: (context, url) {
          return Center(
            child: Container(
              height: 32, // properly size the loading indicators.
              width: 32, // properly size the loading indicators.
              child: CircularProgressIndicator(),
            ),
          );
        },
      ),
    );
  }
}

我还稍微改进了代码的结构。让它更有活力。解决方法是您根本不将大小放在 CachedNetworkImage 小部件中。只需给它一个网址和占位符。带有height: 150 的父容器的代码很好。缓存网络图像会自动适应该高度。