Question

在我的Flutter项目中，我有一个固定高度的容器。在该容器中，我有一个 Listview 。

这是代码-

return new Scaffold(

  appBar: AppBar(
    title: Text("All Values"),
  ),

  body: new Column(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: <Widget>[

      Container(
        height: isLoading ? 50.0 : 0,
        color: Colors.white70,
        child: Center(
          child: new CircularProgressIndicator(),
        ),
      ),

      Expanded(
        child: Container(
          height: 350,
          color: Colors.red,
          alignment: Alignment.bottomLeft,

          child:
          new ListView.builder(
            itemCount: data.length-8,

            itemBuilder: (BuildContext cxtx, int index) {
              return Padding(
                padding:  const EdgeInsets.fromLTRB(10, 0.0, 10, 0),
                child: Container(
                  child: showCard(index, radius),
                ),
              );

            },

            controller: _scrollController,
          ),

        ),),

    ],
  ),

  resizeToAvoidBottomPadding: false,

);

代码输出如下-

所以，问题是我想将这些项目对齐到容器的左下角。我可以使用 reverse：true 完成此操作，但是我需要具有相同顺序的列表项。所以，我需要建议我该怎么做？

Answer 1

您需要成行还是成列的那些项目？继续进行以下操作：试试这个：

 return new Scaffold(
  appBar: AppBar(
    title: Text("All Values"),
  ),
  body:  Column(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      if(isLoading)
        Container(
        height: 50.0 ,
        color: Colors.white70,
        child: Center(
          child: new CircularProgressIndicator(),
        ),
      ),
      Expanded(
        child: Container(
          height: 350,
          color: Colors.red,
          alignment: Alignment.bottomLeft,
          child: new ListView.builder(
            itemCount: data.length - 8,
            itemBuilder: (BuildContext cxtx, int index) {
              return Padding(
                padding: const EdgeInsets.fromLTRB(10, 0.0, 10, 0),
                child: Container(
                  child: Text('asdf'),
                ),
              );
            },
            controller: _scrollController,
          ),
        ),
      ),
    ],
  ),
  resizeToAvoidBottomPadding: false,
);

Answer 2

StoreConnector<_ViewModel, List<Message>>(
      converter: (store) {
        // check mark ,reverse data list
        if (isReverse) return store.state.dialogList;
        return store.state.dialogList.reversed.toList();
      },
      builder: (context, dialogs) {
        // Add a callback when UI render after. then change it direction;
        WidgetsBinding.instance.addPostFrameCallback((t) {
          // check it's items could be scroll
          bool newMark = _listViewController.position.maxScrollExtent > 0;
          if (isReverse != newMark) { // need 
            isReverse = newMark;  // rebuild listview
            setState(() {});
          }
        });

        return ListView.builder(
          reverse: isReverse, // 反转列表，insert数据时，刷新到0，加载更多时，滚动偏移不变
          controller: _listViewController,
          itemBuilder: (context, index) => _bubbleItem(context, dialogs[index], index),
          itemCount: dialogs.length,
        );
      },
    )

如何在不使用Flutter的反向的情况下使ListView项在容器底部以固定高度对齐？

2 个答案: