flutter - 如何使用 Image_stack 包添加资产图像

Question

我正在尝试使用 image_stack 包添加资产图像。我无法将图像添加到 image_stack 的列表中。我只能添加一个网络图像。我无法添加资产图片。

标签： flutterdart

Answer 1

是的，您不能添加任何资产图像，因为image_stack不支持。但是您创建自己的小部件并使用它。像下面的东西。

custom_image_stack.dart

import 'package:flutter/material.dart';

class CustomImageStack extends StatelessWidget {
  final List<String> imageList;
  final double imageRadius;
  final int imageCount;
  final int totalCount;
  final double imageBorderWidth;
  final Color imageBorderColor;
  final TextStyle extraCountTextStyle;
  final Color backgroundColor;

  CustomImageStack({
    Key key,
    @required this.imageList,
    this.imageRadius = 25,
    this.imageCount = 3,
    this.totalCount,
    this.imageBorderWidth = 2,
    this.imageBorderColor = Colors.grey,
    this.extraCountTextStyle = const TextStyle(
      color: Colors.black,
      fontWeight: FontWeight.w600,
    ),
    this.backgroundColor = Colors.white,
  })  : assert(imageList != null),
        assert(extraCountTextStyle != null),
        assert(imageBorderColor != null),
        assert(backgroundColor != null),
        assert(totalCount != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    var images = List<Widget>();
    int _size = imageCount;
    if (imageList.isNotEmpty) images.add(circularImage(imageList[0]));

    if (imageList.length > 1) {
      if (imageList.length < _size) {
        _size = imageList.length;
      }
      images.addAll(imageList
          .sublist(1, _size)
          .asMap()
          .map((index, image) => MapEntry(
                index,
                Positioned(
                  left: 0.8 * imageRadius * (index + 1.0),
                  child: circularImage(image),
                ),
              ))
          .values
          .toList());
    }
    return Container(
      child: Row(
        children: <Widget>[
          images.isNotEmpty
              ? Stack(
                  overflow: Overflow.visible,
                  textDirection: TextDirection.rtl,
                  children: images.reversed.toList(),
                )
              : SizedBox(),
          Container(
            margin: EdgeInsets.only(left: imageRadius / 2 * imageCount + 5),
            child: totalCount - images.length > 0
                ? Container(
                    constraints: BoxConstraints(minWidth: imageRadius),
                    padding: EdgeInsets.all(3),
                    height: imageRadius,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(imageRadius),
                        border: Border.all(color: imageBorderColor, width: imageBorderWidth),
                        color: backgroundColor),
                    child: Center(
                      child: Text(
                        '+${totalCount - images.length}',
                        textAlign: TextAlign.center,
                        style: extraCountTextStyle,
                      ),
                    ),
                  )
                : SizedBox(),
          ),
        ],
      ),
    );
  }

  Widget circularImage(String imageUrl) {
    return Container(
      height: imageRadius,
      width: imageRadius,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(
          color: Colors.white,
          width: imageBorderWidth,
        ),
      ),
      child: Container(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.white,
          image: DecorationImage(
            image: isLink(imageUrl) ? NetworkImage(imageUrl) : AssetImage(imageUrl),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

  bool isLink(String str) {
    var regex = RegExp('^(http|https):.*\.(co|org|in)');
    return regex.hasMatch(str);
  }
}

main.dart

import 'package:flutter/material.dart';

import 'custom_image_stack.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> images = [
    "assets/ajay.png",
    "https://i.stack.imgur.com/IJ8Ep.jpg?s=48&g=1",
    "assets/ajay.png",
    "https://i.stack.imgur.com/IJ8Ep.jpg?s=48&g=1",
    "assets/ajay.png",
    "https://i.stack.imgur.com/IJ8Ep.jpg?s=48&g=1",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
          child: CustomImageStack(
        imageList: images,
        imageCount: 3,
        imageBorderWidth: 3,
        totalCount: images.length,
      )),
    );
  }
}

希望能帮助到你 ：）