如何在 FLUTTER 中的图像滑块/轮播上使图像显示全视图以及如何在图像滑块上制作表格？答案

【问题标题】：How to make an IMAGE show FULL VIEW on image Slider / Carousel in FLUTTER and how to make a table over the image slider?如何在 FLUTTER 中的图像滑块/轮播上使图像显示全视图以及如何在图像滑块上制作表格？
【发布时间】：2019-04-05 03:45:02
【问题描述】：

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

这是我所做的：

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

我有 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 ?
如何创建一个像没有一样的表。 2 ?
如何制作不同的背景颜色/在 1 号桌子上设置背景？

【问题讨论】：

标签： android flutter carousel androidimageslider

【解决方案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();

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

就显示“完整图像”而言，您应该查看 CarouselSlider 的 aspectRatio 属性。这是提示宽度/高度。

对于表格，考虑创建一个像这样的小部件树：

Column
  Row
    Text
    Expanded
      Text
  Row
    ...

交替查看 Table、TableRow 和 TableCell。

【讨论】：