Question

我想在Flutter中建立一个屏幕，看起来应该像这样：

--BEGIN重要部分-

生成的列项目（包含标题和说明）
项目列表

-END重要部分-

如何结合以下Listview生成那些列（不应是可折叠的）？如何生成“无Listview”-类似于n ListView的小部件？如何像建立ListView一样建立列？

Answer 1

您的问题很令人困惑。这是您要找的吗？

import 'package:flutter/material.dart';

main()  {
  runApp(new MaterialApp(
    title: 'Flutter Example',
    home: new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(title: new Text("Flutter Example"),),
        body: new MyApp(),
      ),
    ),
  ));
}

class MyApp extends StatelessWidget {


  @override
  Widget build(BuildContext context) {

    List<ColumnItem> items = [];

    // creates ColumnItems to display
    for (var i = 0; i < 40; i++) {
      items.add(
        new ColumnItem(title: "This is a title", description: "Descriptions are usefull",)
      );
    }

    return new ListView(
      children: items,
    );
  }
}




class ColumnItem extends StatelessWidget {

  final String title;
  final String description;

  const ColumnItem({this.title, this.description});

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new Text(this.title, style: new TextStyle(fontSize: 22.0, fontWeight: FontWeight.bold),),
        new Text(this.description)
      ],
    );
  }
}

编辑：在进一步阅读您的问题之后，也许这就是您要尝试的事情？

import 'package:flutter/material.dart';

main()  {
  runApp(new MaterialApp(
    title: 'Flutter Example',
    home: new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(title: new Text("Flutter Example"),),
        body: new MyApp(),
      ),
    ),
  ));
}

class MyApp extends StatelessWidget {


  @override
  Widget build(BuildContext context) {

    List<ColumnItem> items = [];

    // creates ColumnItems to display
    for (var i = 0; i < 40; i++) {
      items.add(
        new ColumnItem(title: "This is a title", description: "Descriptions are usefull",)
      );
    }

    return new Column(
      children: [
        new Text("Static Title", style: new TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold), ),
        new Text("This is a static desctription"),
        new Divider(),
        new Expanded(
          child: new ListView(children: items) ,
        )

      ],
    );
  }
}




class ColumnItem extends StatelessWidget {

  final String title;
  final String description;

  const ColumnItem({this.title, this.description});

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new Text(this.title, style: new TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold),),
        new Text(this.description)
      ],
    );
  }
}

如何在Flutter中生成“ ColumnList”

1 个答案: