理论不多哔哔，直接上代码：
import 'dart:convert';
import 'package:flutter/material.dart';
void main() {
runApp(Myapp()); //main函数运行方法入口
}
class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("flutter demo"),
),
body: MyAppDemo03(),
),
);
}
}
/**
* 布局
* 1.垂直布局
* 2.垂直图文布局
* 3.水平布局
* 4.动态布局
*/
//垂直列表
class MyAppDemo03 extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: ListView(
// 创建列表元素
children: <Widget>[
ListTile(
leading: Icon(Icons.phone), //显示的图标 默认左边
title: Text(
//一级标题
"这是一个listView",
style: TextStyle(fontSize: 25.0),
),
subtitle: Text(
//二级标题
"哗啦啦--哗啦啦",
style: TextStyle(fontSize: 18.0),
),
),
ListTile(
title: Text(
"这是一个listView",
style: TextStyle(fontSize: 20.0),
),
subtitle: Text("哗啦啦--哗啦啦"),
),
ListTile(
leading: Icon(Icons.ac_unit),
title: Text(
"这是一个listView",
style: TextStyle(fontSize: 30.0),
),
subtitle: Text("哗啦啦--哗啦啦"),
trailing: Icon(Icons.ac_unit), //在后面添加图标
),
ListTile(
title: Text(
"这是一个listView",
style: TextStyle(fontSize: 28.0),
),
subtitle: Text("哗啦啦--哗啦啦"),
trailing: Icon(Icons.access_alarm_outlined), //在后面添加图标
),
],
));
}
}
/**
* 水平列表
*/
class MyAppDemo033 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
//返回一个容器
//设置容器的基本属性
height: 200.0,
margin: EdgeInsets.all(5),
//创建一个ListView
child: ListView(
scrollDirection:
Axis.horizontal, //Axis.horizontal 水平列表 Axis.vertical 垂直列表
// 创建列表元素
children: <Widget>[
//嵌套容器
Container(
width: 180.0,
color: Colors.amber,
//创建列表
child: ListView(
children: <Widget>[
Image.network(
"https://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg"),
SizedBox(height: 16.0),
Text(
"这是一个文本信息",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 30.0, color: Colors.blue),
)
],
),
),
//第二个嵌套容器
Container(
width: 180.0,
color: Colors.deepOrange,
),
//第三嵌套容器
Container(
width: 180.0,
color: Colors.deepPurpleAccent,
)
],
),
);
}
}
/**
* 动态列表（动态循环数据）
*/
class MyAppDemo0333 extends StatelessWidget {
//创建一个List集合
List<Widget> _getData() {
// List<Widget> list = new List();
List<Widget> list = List.empty(growable: true);
for (int i = 0; i < 20; i++) {
list.add(ListTile(title: Text("我是$i列表")));
}
return list;
}
@override
Widget build(BuildContext context) {
return ListView(children: this._getData());
}
}
理论不多哔哔，直接上代码：
import 'dart:convert';
import 'pack
阅读背景：
flutter 基础布局（垂直，水平，动态）
来源：互联网
分享到：
