所以基本上我只想有一个水平对齐ListView
或PageView
里面有项目,当前选择的项目将占据整个可用的全宽。到目前为止,这是我的基本代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
// Initialize DATA MODEL list with some random values.
List<DataModel> dataList = ['Andrew', 'Test', 'Data', 'Random']
.map<DataModel>((s) => DataModel(s))
.toList();
double containerWidth;
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
//var fWidth = MediaQuery.of(context).size.height * 1;
return MaterialApp(
title: 'Adjustable height card.',
home: Scaffold(
body: ListView.builder(
controller: PageController(viewportFraction: 0.8),
scrollDirection: Axis.horizontal,
itemCount: dataList.length,
itemBuilder: (context, index) {
DataModel item = dataList.elementAt(index);
// Check if the item is expanded or not and set size accordingly
containerWidth = item.expanded
? MediaQuery.of(context).size.width * 1
: MediaQuery.of(context).size.width * 0.30;
return GestureDetector(
onDoubleTap: () {
setState(() {
item.expanded = !item.expanded;
});
},
child: AnimatedContainer(
curve: Curves.easeOut,
duration: Duration(milliseconds: 400),
color: Colors.red,
width: containerWidth,
margin: EdgeInsets.all(8),
child: Center(
child: Text(
dataList.elementAt(index).title,
style: TextStyle(
color: Colors.white,
),
),
),
),
);
},
),
));
}
}
class DataModel {
String title;
bool expanded;
DataModel(this.title) {
expanded = false;
}
}
正如您现在所看到的,我可以为所选元素提供全宽,但我需要进行某种页面捕捉,因为目前我无法以一种好的方式跳过大容器或小容器。现在,如果我将整个内容更改为PageView
,我将无法再控制AnimatedContainer
. 请帮忙。