如何添加一个位于页面底部并可以使用 ListView 滚动的小部件？答案

【问题标题】：How can I add a Widget that is at the bottom of the page and Scrollable with ListView?如何添加一个位于页面底部并可以使用 ListView 滚动的小部件？
【发布时间】：2019-11-09 00:29:36
【问题描述】：

我有一个构建多张卡片的 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),
          )
        ],
      ),
    );
  }

目前我有 Text 在 ListView 下，但 Text 在页面上是静态的，不能使用 ListView 滚动。

how it looks right now

【问题讨论】：

你到底想要什么作为输出？请添加图片或更多信息。

标签： listview flutter dart flutter-sliver flutter-listview

【解决方案1】：

只需进行一些更改即可使其正常工作：

将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),
            )
          ],
        ),
      ),
    );
  }

希望对你有帮助:)

【讨论】：