一次在轮播中显示两张图片

Question

我怎样才能做出这样的东西，在图片上用 flutter 显示出来？我搜索了 flutter carousel_slider 2.2.1 库，但是它没有同时显示两张图片的功能。

    Widget _buildReport() {
  return CarouselSlider(
    options: CarouselOptions(
      height: 150.0,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 4),
      autoPlayAnimationDuration: Duration(milliseconds: 800),
      autoPlayCurve: Curves.fastOutSlowIn,
    ),
    items: [1, 2, 3, 4, 5].map((i) {
      return Builder(
        builder: (BuildContext context) {
          return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              child: Image(
                image: AssetImage('assets/dog.jpg'),
                fit: BoxFit.cover,
              ));
        },
      );
    }).toList(),
  );
}

Answer 1

您可以使用轮播来做到这一点，使用 Row 小部件和 MainAxisAlignment.spaceBetween 并用 Expanded 包装每个图像，如下所示：

Container(
                  width: MediaQuery.of(context).size.width,
                  margin: EdgeInsets.symmetric(horizontal: 5.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: Image.asset(
                          "assets/",
                          fit: BoxFit.cover,
                        ),
                      ),
                      Expanded(
                        child: Image.asset(
                          "assets/",
                          fit: BoxFit.cover,
                        ),
                      ),
                    ],
                  ),
                )

运行个应用程序：

一次在轮播中显示两张图片

Display two pictures in carousel at a time

indicator

carousel

flutter