如何在 Flutter 中生成 "ColumnList"
How can I generate a "ColumnList" in Flutter
我想在 Flutter 中构建一个应该如下所示的屏幕:
--开始重要部分--
- 生成的列项(包含标题和说明)
- 项目列表
--END重要部分--
如何结合以下列表视图生成这些列(不应是可滚动的)?如何生成 "no Listview"-像 n ListView 这样的小部件?
如何像构建 ListView 一样构建 Columns?
你的问题很混乱。这是您要找的吗?
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 中构建一个应该如下所示的屏幕:
--开始重要部分--
- 生成的列项(包含标题和说明)
- 项目列表
--END重要部分--
如何结合以下列表视图生成这些列(不应是可滚动的)?如何生成 "no Listview"-像 n ListView 这样的小部件? 如何像构建 ListView 一样构建 Columns?
你的问题很混乱。这是您要找的吗?
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)
],
);
}
}