如何在颤动中将页脚添加到 ReorderableListView

Posted 2023-02-23

【中文标题】如何在颤动中将页脚添加到 ReorderableListView

【英文标题】：How to add footer to ReorderableListView in flutter

【发布时间】：2019-11-10 22:44:45

【问题描述】：

尝试制作一个包含页眉和页脚以及可重新排列的内容项的用户界面。有一个名为 header 的属性，我们可以从中添加标题项。但是如果我也想添加 footer 项该怎么办。

import 'package:flutter/material.dart';

class MyStickyHeader extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 
    return _MyStickyHeaderState();
  


class _MyStickyHeaderState extends State<MyStickyHeader> 
  List<Widget> _list = [
    Text("Apple"),
    Text("Ball"),
    Text("Cat"),
    Text("Dog"),
    Text("Elephant")
  ];

  @override
  Widget build(BuildContext context) 
    return Container(
      margin: EdgeInsets.only(top: 30, left: 10),
      color: Colors.white,
      child: showData(),
    );
  

  Widget showData() 
    return Container(
      child: ReorderableListView(
        header: Container(
          height: 100,
          color: Colors.red,
        ),
        children: _list
            .map((item) => Container(
                  padding: EdgeInsets.all(10),
                  key: Key("$(item as Text).data"),
                  child: Row(
                    children: <Widget>[
                      Icon(Icons.ac_unit),
                      Expanded(
                        child: item,
                      )
                    ],
                  ),
                ))
            .toList(),
        onReorder: (int start, int current) 
          // dragging from top to bottom
          if (start < current) 
            int end = current - 1;
            Widget startItem = _list[start];
            int i = 0;
            int local = start;
            do 
              _list[local] = _list[++local];
              i++;
             while (i < end - start);
            _list[end] = startItem;
          

          // dragging from bottom to top
          if (start > current) 
            Widget startItem = _list[start];
            for (int i = start; i > current; i--) 
              _list[i] = _list[i - 1];
            
            _list[current] = startItem;
          
          setState(() );
        ,
      ),
    );
  

【参考方案1】：

列表的最后一个元素可以是页脚。它必须是具有 onLongPress 属性的小部件。例如：

ReorderableListView(
      onReorder: (int oldIndex, int newIndex) ,
      children: List.generate(someList.items.length + 1, (index) 
        if (index < someList.items.length)
          return ListTile(
            key: Key(someList.items[index].description),
          );
        else
          return RaisedButton(key: Key('footer'), onPressed: () , onLongPress: (), child: Text('Button'));
      )),

【讨论】：

我有同样的问题，这种解决了。但问题是，即使您无法使用此特定项目，列表中的其他项目也可以取代它

【参考方案2】：

如果您使用Column 和Expanded 小部件包装您的ReorderableListView，您可以在底部添加Container 作为页脚：

Column(
  children: <Widget>[
    Expanded(
      child: ReorderableListView(
        header: Container(
          height: 100,
          color: Colors.red,
        ),
        children: _list
          .map((item) => Container(
          padding: EdgeInsets.all(10),
          key: Key("$(item as Text).data"),
          child: Row(
            children: <Widget>[
              Icon(Icons.ac_unit),
              Expanded(
                child: item,
              )
            ],
          ),
        )).toList(),
        onReorder: (int start, int current) 
          // dragging from top to bottom
          if (start < current) 
            int end = current - 1;
            Widget startItem = _list[start];
            int i = 0;
            int local = start;
            do 
              _list[local] = _list[++local];
              i++;
             while (i < end - start);
            _list[end] = startItem;
          

          // dragging from bottom to top
          if (start > current) 
            Widget startItem = _list[start];
            for (int i = start; i > current; i--) 
              _list[i] = _list[i - 1];
            
            _list[current] = startItem;
          
          setState(() );
        ,
      ),
    ),
    Container(
      height: 40,
      alignment: Alignment.center,
      child: Text('Footer'),
      color: Colors.orange,
    ),
  ],
),

【讨论】：

我遇到了同样的问题。您的解决方案在 ReorderableListView 下方创建了一个固定页脚，但问题是在列表视图的末尾有一个页脚，它可能会滚动到视口之外，但不能更改其在列表中的位置。我已经打开了一个功能请求以向 ReorderableListView 添加页脚。 （只需要另外三行 ;-)

@Jemolah 我正在为此苦苦挣扎。你有没有解决过？小心分享这三行代码:-)

【参考方案3】：

要实现这种视图，我建议使用 Slivers。

好处：

粘性页眉/页脚。 无限正文/内容滚动。

检查下面的代码：

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(
                  width: double.infinity,
                  height: 50,
                  color: Colors.orangeAccent,
                  child: Center(
                    child: Text(
                      'Header',
                      style: TextStyle(color: Colors.white, letterSpacing:4),
                    ),
                  ),
                ),
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: 100,
                  itemBuilder: (BuildContext context, int index) 
                    return ListTile(
                      title: Center(child: Text('$index')),
                    );
                  ,
                ),
              ],
            ),
          ),
          SliverFillRemaining(
            hasScrollBody: false,
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                width: double.infinity,
                height: 50,
                color: Colors.blueAccent,
                child: Center(
                  child: Text(
                    'Footer',
                    style: TextStyle(color: Colors.white, letterSpacing: 4),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  

更多详情请看这里：

https://itnext.io/create-a-header-footer-with-scrollable-body-view-in-flutter-5551087270de

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review