如何添加页面底部的小部件并使用ListView滚动



我有一个构建多张卡的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中不可滚动。

现在看起来如何

仅几个更改才能使其有效:

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

希望它有帮助:(

最新更新