flutter - 颤动水平列表视图/页面视图，选定元素动画到全宽

Question

所以基本上我只想有一个水平对齐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. 请帮忙。

标签： flutterflutter-layoutflutter-animationflutter-listviewflutter-pageview

Answer 1

    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;
  }
}