如何自定义屏幕中间的滑块

Question

我试图在屏幕中间制作一个滑块，并隐藏第二个产品的一半。我想让我的滑块看起来像这个

我想让我的滑球看起来像这样有人知道怎么做吗？

Answer 1

试试这个。

import 'package:flutter/material.dart';

void main() =>
runApp(MaterialApp(
home: MainScreen(),
));
class MainScreen extends StatelessWidget {
final List<int> numbers = [1, 2, 3, 5, 8, 13, 21, 34, 55];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Horizontal ListView'),
),
body: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0),
height: MediaQuery
.of(context)
.size
.height * 0.35,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: numbers.length, itemBuilder: (context, index) {
return Container(
width: MediaQuery
.of(context)
.size
.width * 0.6,
child: Card(
color: Colors.blue,
child: Container(
child: Center(child: Text(numbers[index].toString(),
style: TextStyle(color: Colors.white, fontSize: 36.0),)),
),
),
);
}),
),
);
}
}

Answer 2

这可能会启发您，自定义列表视图：

class GameModel {
final String image;
final String title;
final String subtitle;
GameModel({
this.image,
this.title,
this.subtitle,
});
}
final game1 = GameModel(
image: 'https://img.techpowerup.org/201029/game1.png',
title: 'Road Fight',
subtitle: 'Shooting Cars',
);
final game2 = GameModel(
image: 'https://img.techpowerup.org/201029/game2.png',
title: 'Vikings',
subtitle: 'Sons of Ragnar',
);
final List<GameModel> games = [
game1,
game2,
game1,
game2,
game1,
game2,
game1,
game2,
game1,
game2,
game1,
game2,
game1,
game2,
game1,
game2,
];
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter 4 Fun'),
),
body: Center(
child: HorizontalSnappingList(
itemWidth: 188.0,
itemHorizontalMargin: 0,
itemCount: games.length,
itemBuilder: (context, i) => GameItemWidget(gameModel: games[i]),
),
),
);
}
}