Виджет элемента списка флиптера - PullRequest
Новая
       18

Виджет элемента списка флиптера

0 голосов
/ 28 июня 2019

Я создал этот пример нижнего колонтитула элемента списка с помощью кода, приведенного ниже кода, однако я хотел бы расширить его на несколько элементов на одном экране, когда появится следующий прикрепленный элемент, я хочу, чтобы он оттолкнул текущий элемент,

Я не уверен, что лучший способ справиться с этим

  1. Поскольку я использую трюк с видимостью, и когда появляется следующий элемент, текущий исчезает, делая его странным.
  2. Потому что я должен поддерживать n глобальных ключей, и я не уверен, является ли это правильным подходом или как это влияет на производительность.
class ListScreen extends StatefulWidget {
  @override
  _ListScreenState createState() => _ListScreenState();
}

class _ListScreenState extends State<ListScreen> {
  ScrollController _controller;
  GlobalKey _key = GlobalKey();
  GlobalKey _listKey = GlobalKey();
  bool opacity = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  Widget _stickyItem() {
    return Container(
      height: 60,
      decoration: BoxDecoration(
        color: Color(0xFF444444),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    _controller = new ScrollController();

    _controller.addListener(() {
      final box = _key.currentContext.findRenderObject() as RenderBox;
      final listBox = _listKey.currentContext.findRenderObject() as RenderBox;

      final listPosition = listBox.localToGlobal(Offset.zero);
      final footerPosition = box.localToGlobal(Offset.zero);
      print(listPosition);
      print(footerPosition);

      if (listPosition >= footerPosition) {
        if (opacity == false) {
          setState(() => opacity = true);
        }
      } else if (opacity) {
        setState(() => opacity = false);
      }
    });

    return Scaffold(
      body: Container(
        child: SafeArea(
          child: Stack(
            children: <Widget>[
              ListView.builder(
                key: _listKey,
                itemCount: 1000,
                controller: _controller,
                physics: const AlwaysScrollableScrollPhysics(),
                itemBuilder: (context, index) {
                  if (index == 0) {
                    return Container(
                      child: Column(
                        children: <Widget>[
                          Container(
                            height: 400,
                          ),
                          Container(
                            key: _key,
                            height: 60,
                            color: Color(0xFF444444),
                          ),
                        ],
                      ),
                      decoration: BoxDecoration(
                        color: Color(0xFFFFFFee),
                      ),
                    );
                  }
                  return Container(
                      height: 60,
                      decoration: BoxDecoration(color: Colors.white),
                      child: Card());
                },
              ),
              Visibility(
                visible: opacity,
                child: _stickyItem(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Так выглядит при запуске. [! [Unpinned] [1]] [1]

[! [Pinned] [2]] [2]

Я знаю, что есть некоторые библиотеки, после того, как я посмотрел на них, я заметил, что не только будет трудно реализовать мой конкретный случай необходимости, я также думаю, что я

Закреплен: https://i.stack.imgur.com/cIejy.png Не закреплено: https://i.stack.imgur.com/MbC4L.png

...