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

【问题标题】：Flutter horizontal Listview/Pageview with selected element animated to full width颤动水平列表视图/页面视图，选定元素动画到全宽
【发布时间】：2021-02-01 05:47:12
【问题描述】：

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

【问题讨论】：

标签： flutter flutter-layout flutter-animation flutter-listview flutter-pageview

【解决方案1】：

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

【讨论】：

我的目标是让我们说 5 个宽度为 200 的项目，您应该已经在视图中看到 2 个项目。现在如果我们在选定的项目上，它应该变成 100% 设备宽度。
点击后，您可以为每个小部件指定媒体查询大小。
在 pageviewbuilder 中，所有项目始终全屏显示。你能给我一个可用的例子吗？
只需将内容包装到一个 Container 小部件中（如果需要，可以将小部件居中）。

【解决方案2】：

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

【讨论】：