如何添加位于页面底部且可通过ListView滚动的Widget?

时间:2019-06-27 03:05:23

标签: listview flutter dart flutter-sliver flutter-listview

我有一个ListView可以构建多张卡片,在它们的下面,我想添加一个Text小部件,该小部件位于ListView下,但位于页面底部,这意味着您必须向下滚动到最后一张卡片看到它。

   Widget _buildCardList() {
    return ListView.builder(
      itemBuilder: _buildFoodCards,
      itemCount: cardList.length,
    );
  }

   @override
  Widget build(BuildContext context) {
    return Container(
      // constraints: BoxConstraints.expand(),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Color(0xff170422), Color(0xff9B22E6)],
          stops: [0.75, 1],
        ),
      ),
      child: Column(
        children: <Widget>[
          Expanded(child: _buildCardList()),
          Text(
            'TEXT THAT SHOULD BE SCROLLABLE UNDER THE LISTVIEW',
            style: TextStyle(color: Colors.white),
          )
        ],
      ),
    );
  }

此刻,我的文本位于ListView下,但是该文本在页面上是静态的,无法在ListView上滚动。

how it looks right now

1 个答案:

答案 0 :(得分:2)

只需进行一些更改即可使其生效:

  • shrinkWrap = true设置为您的ListView
  • physics = NeverScrollableScrollPhysics设置为您的ListView
  • SingleChildScrollView添加为您的Column的父母。
  • 删除Expanded小部件。

代码


  Widget _buildCardList() {
    return ListView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemBuilder: _buildFoodCards,
      itemCount: cardList.length,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // constraints: BoxConstraints.expand(),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Color(0xff170422), Color(0xff9B22E6)],
          stops: [0.75, 1],
        ),
      ),
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            _buildCardList(),
            Text(
              'TEXT THAT SHOULD BE SCROLLABLE UNDER THE LISTVIEW',
              style: TextStyle(color: Colors.white),
            )
          ],
        ),
      ),
    );
  }

希望它会有所帮助:)