在转盘滑块颤动中显示两个项目

Question

两个项目同时

目前，我正在将我的伪数据传递到转盘项目。

在滑块中同时显示两个项目是我的目标。。。

但正如您所知，map方法一次遍历列表中的一个项目。。。

现在，我用Row Widget将旋转木马项目除以2。。。

还有其他方法可以实现吗？

类似于循环的增量每次增加2。。。

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
var reports = [
{
'title': '1',
'content': '1'
},
{
'title': '2',
'content': '2'
},
{
'title': '3',
'content': '3'
},
{
'title': '4',
'content': '4'
},
];
Widget buildReport() {
return CarouselSlider(
options: CarouselOptions(
height: 250.0,
),
items: reports
.asMap()
.map(
(i, report) {
return MapEntry(
i,
Builder(
builder: (BuildContext context) {
return Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Card(
child: Container(
child: Column(
children: [
Text(
'${report['title']}',
),
Text(
'${report['content']}',
),
],
),
),
),//i wish these two cards have different data.
Card(
child: Container(
child: Column(
children: [
Text(
'${report['title']}',
),
Text(
'${report['content']}',
),
],
),
),
),
],
),
);
},
),
);
},
)
.values
.toList(),
);
}

我想过(for循环(，但我不知道如何在这段代码中做到这一点。。。

Answer 1

try:viewportFraction:0.5，容器占用屏幕的50%

options: CarouselOptions(
height: 250.0,
viewportFraction: 0.5,
),

Answer 2

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key key, this.choice, @required this.item}) : super(key: key);
final Choice choice;
final Choice item;
@override
MyAppState createState() => MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Basic demo')),
body: Container(
child: CarouselSlider(
options: CarouselOptions(
disableCenter: false,
),
items: choices
.map((Choice) => Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Card(
child: Container(
child: Column(
children: [
Text(
Choice.title,
style: null,
textAlign: TextAlign.left,
),
Text(
Choice.content,
style: null,
textAlign: TextAlign.left,
),
],
),
),
),
Card(
child: Container(
child: Column(
children: [
Text(
Choice.title,
style: null,
textAlign: TextAlign.left,
),
Text(
Choice.content,
style: null,
textAlign: TextAlign.left,
),
],
),
),
),
],
),
color: Colors.green,
))
.toList(),
)),
));
}
}
class Choice {
const Choice({this.title, this.content});
final String title;
final String content;
}
const List<Choice> choices = const <Choice>[
const Choice(title: 'title : 1', content: 'content : 1'),
const Choice(title: 'title : 2', content: 'content : 2'),
const Choice(title: 'title : 3', content: 'content : 3'),
const Choice(title: 'title : 4', content: 'content : 4'),
];