如何使 ListView Items 在容器底部以固定高度对齐而不在 Flutter 中使用反向？

Question

In my Flutter project, I have a container with a fixed height. Inside that container I have a Listview .

Here's the code-

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,

);

The code outputs like below-

So, the problem is I want to align these items at bottom left of the container. I could have done that using reverse: true but I need the list items with the same sequence. So, I need suggestion how can I do that?

Answer 1

You need those items in a row or a column? Follow with a row possibility: Try this:

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