如何使图像在 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( //IMAGE - SLIDER padding: EdgeInsets.symmetric(vertical: 15.0), child: Column(children: [ CarouselWithIndicator(), ]) ),

我有3个问题。

1. 如何制作完整的图像，就像没有。 3 ?
2. 如何创建一个像没有的表。 2 ?
3. 如何制作不同的背景颜色/在像 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();

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

在显示“完整图像”方面，您应该查看 CarouselSlider 的 aspectRatio 属性。 这是一个提示宽度/高度。

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

Column
  Row
    Text
    Expanded
      Text
  Row
    ...

或者查看 Table、TableRow 和 TableCell。