listview - Flutter - 实现放置在屏幕底部的水平、可滚动的按钮列表

Question

我是 Flutter 的新手。我想在屏幕底部实现一个水平的、可滚动的按钮列表(例如，Instagram 的效果列表)。下面的代码生成了一个按钮列表，但是每个按钮的高度都填满了整个屏幕:

@override
Widget build(BuildContext context) {
  return Scaffold( 
      appBar: AppBar( title: Text("Sample App") ),
      body: getEffectsWidget());
}


getEffectsWidget() {

  return ListView(
                scrollDirection: Axis.horizontal,
                children: _getListData() );
}


_getListData() {
  List<Widget> widgets = [];
  for (int i = 0; i < 100; i++) {
    widgets.add(Padding(padding: EdgeInsets.all(10.0),
        child:FlatButton(
              onPressed: () => {},
              color: Colors.orange,
              padding: EdgeInsets.all(10.0),
              child: Column( // Replace with a Row for horizontal icon + text
                children: <Widget>[
                  Icon(Icons.add),
                  Text("Add")
                ],
              )
          )
      )
    );
  }
  return widgets;
}

我试图用 mainAxisAlignment: mainAxisAlignment.end 将 ListView 包装在 Column 容器中，但出现以下异常:

The following assertion was thrown during performResize():
I/flutter (23983): Horizontal viewport was given unbounded height.
I/flutter (23983): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter (23983): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter (23983): vertical space in which to expand.

Answer 1

只需包装您的 FlatButton在 Column 里面, 然后在 FlatButton 上面创建一个小部件(列内)由 Expanded 包裹覆盖所有可用空间和您的 FlatButton将放在底部。

      _getListData() {
        List<Widget> widgets = [];
        for (int i = 0; i < 100; i++) {
          widgets.add(Padding(
              padding: EdgeInsets.all(10.0),
              child: Column(
                children: <Widget>[
                  Expanded(
                    child: Container(),
                  ),
                  FlatButton(
                      onPressed: () => {},
                      color: Colors.orange,
                      padding: EdgeInsets.all(10.0),
                      child: Column(
                        // Replace with a Row for horizontal icon + text
                        children: <Widget>[Icon(Icons.add), Text("Add")],
                      )),
                ],
              )));
        }
        return widgets;
      }