问题描述
我正在尝试在屏幕中间制作一个滑块并隐藏第二个产品的一半。 我希望我的滑块看起来像这样
i want my slider to look like this anybody got any idea how to do it ?
解决方法
试试这个。
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),)),);
}),);
}
}
,
这可能会激励你,custom listview:
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,];
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,i) => GameItemWidget(gameModel: games[i]),);
}
}