将垂直和水平滚动都添加到ListView

时间:2019-06-04 12:52:45

标签: flutter dart

如何将Row放在垂直ListView内,水平滚动。

这是我的应用程序的外观:

enter image description here

我希望用户能够水平滚动ListView(以查看Row的内容)和垂直滚动ListView来查看新的列表项。此行为类似于您在Flutter中滚动DataTable的方式:

enter image description here

以下是构建方法(基于Flutter项目模板):

@override
Widget build(BuildContext context) {
  final List<String> rows = [
    "This is a row with some very long text ... That goes on and on",
    "This class is the configuration for the state.",
    "case the title) provided by the parent (in this case the App widget) and",
    "always marked \"final\"."
  ];

  return Scaffold(
    appBar: AppBar(title: Text("ListView")),
    body: ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        for (final String row in rows)
          Row(
            children: <Widget>[Text(row)],
          )
      ],
    ),
  );
}

更新:将Text中的Expanded换行不起作用,因为它会导致文本换行成多行。我希望文本保持在一行上。

1 个答案:

答案 0 :(得分:0)

最后 经过深入的搜索,终于找到了

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: new SizedBox(
          width: 1000.0,
          child: new ListView.builder(
            itemBuilder: (BuildContext context, int i) {
              return new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: new List.generate(5, (int j) {
                  return new Text("$i,$j");
                }),
              );
            },
          ),
        ),
      ),
    );
  }

原始来源Vote up his answer too