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

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个问题。

1. 如何使完整的图像像没有。 3？
2. 如何创建一个像没有的表。 2？
3. 如何制作不同的背景颜色/在像1号的桌子上给出背景？

Answer 1

您的地图方法是不必要的，您可以这样做更容易：

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。