如何使图像在 FLUTTER 中的图像滑块/旋转木马上显示完整视图以及如何在图像滑块上制作 table？

Question

我有一个图像滑块/旋转木马，但它不会显示我想要的大/完整图像。它只显示了一半的图像，其中包含阴影边框...

这是我所做的：

以下是我希望能提出的观点：

我有 2 个飞镖文件。这是调用它的人：

final List<String> imgList = [
  'images/Polo 01.png',
  'images/Polo 02.png',
  'images/Polo 03.png',
  'images/Polo 04.png',
  'images/Polo 05.png',
];
final List child = map<Widget>(
  imgList,
      (index, i) {
    return Container(
      margin: EdgeInsets.all(5.0),
      child: ClipRRect(
        child: Stack(children: <Widget>[
          Image.asset(i, fit: BoxFit.cover, width: 1000.0),
          Positioned(
            bottom: 0.0,
            left: 0.0,
            right: 0.0,
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
            ),
          ),
        ]),
      ),
    );
  },
).toList();

List<T> map<T>(List list, Function handler) {
  List<T> result = [];
  for (var i = 0; i < list.length; i++) {
    result.add(handler(i, list[i]));
  }

  return result;
}

class CarouselWithIndicator extends StatefulWidget {
  @override
  _CarouselWithIndicatorState createState() => _CarouselWithIndicatorState();
}

class _CarouselWithIndicatorState extends State<CarouselWithIndicator> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      CarouselSlider(
        items: child,
        autoPlay: true,
        enlargeCenterPage: false,
        aspectRatio: 2.0,
        onPageChanged: (index) {
          setState(() {
            _current = index;
          });
        },
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: map<Widget>(
          imgList,
              (index, url) {
            return Container(
              width: 8.0,
              height: 8.0,
              margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
            );
          },
        ),
      ),
    ]);
  }
}


and here to show the view:

body: ListView (
            children: <Widget>[
              new Align 
              (
              alignment: Alignment.topCenter,
                  child: Container(
                    padding: const EdgeInsets.all(5.0),
                    child: Text('Nama Produk', style: TextStyle(color: Colors.black)),
               )
              
              Padding(    //I M A G E  -  S L I D E R
                  padding: EdgeInsets.symmetric(vertical: 15.0),
                  child: Column(children: [
                    CarouselWithIndicator(),
                  ])
              ),

我有 3 个问题。

如何使完整图像像没有。 3 ?
如何创建一个 table 喜欢不。 2 ?
如何制作不同的背景颜色/在 table 设置背景，如 1 号？

Answer 1

你的 map 方法是不必要的你可以像这样更容易地做到这一点：

final List<Color> colorList = [
  Colors.blue,
  Colors.red,
  Colors.green,
  Colors.deepPurple,
  Colors.yellow,
];

final List<Widget> colorBackgrounds = colorList
    .map((color) => Container(
          margin: EdgeInsets.all(5.0),
          child: Container(
            width: 500,
            height: 500,
            color: color,
            child: Text("Hello"),
          ),
        ))
    .toList();

上面的代码应该告诉你如何设置背景颜色。

在显示 "full image" 方面，您应该查看 CarouselSlider 的 aspectRatio 属性。这里有一个提示 width/height.

对于 table 考虑创建这样的小部件树：

Column
  Row
    Text
    Expanded
      Text
  Row
    ...

或者查看 Table、Table 行和 Table 单元格。

如何使图像在 FLUTTER 中的图像滑块/旋转木马上显示完整视图以及如何在图像滑块上制作 table？

How to make an IMAGE show FULL VIEW on image Slider / Carousel in FLUTTER and how to make a table over the image slider?

android

carousel

flutter

androidimageslider