颤动的水平Listview / Pageview与选定的元素动画为全宽

问题描述

因此，基本上，我只想在其中包含项目的情况下进行水平捕捉ListView或PageView，其中当前选定的Item会占据整个可用的整个宽度。到目前为止，这是我的基本代码：

    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的宽度。请帮忙。

解决方法

    import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: 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) {

    return MaterialApp(
        title: 'Adjustable height card.',home: Scaffold(
          body: ListView(children: getViewList(),controller: PageController(viewportFraction: 0.8),scrollDirection: Axis.horizontal,)
        ));
  }
  List<Widget> getViewList()
  {
    var listOfWidgets = List<Widget>();


    for (var item in dataList) {
      containerWidth = item.expanded
          ? MediaQuery.of(context).size.width* 1
          :  MediaQuery.of(context).size.width * 0.30;
      listOfWidgets.add(GestureDetector(
        onDoubleTap: () {
          print("onDoubleTap");
          setState(() {
            for (var item in dataList)
              item.expanded=false;
            item.expanded = !item.expanded;
          });
        },child: AnimatedContainer(
          curve: Curves.easeOut,duration: Duration(milliseconds: 100),color: Colors.red,width: containerWidth,margin: EdgeInsets.all(8),child: Center(
            child: Text(
              item.title,style: TextStyle(
                color: Colors.white,),)); // TODO: Whatever layout you need for each widget.
    }

    return listOfWidgets;
  }
}


class DataModel {
  String title;
  bool expanded;

  DataModel(this.title) {
    expanded = false;
  }
}

,

您应该控制宽度，为什么不呢？您是否尝试过使用PageView.builder方法？