The layout is a list of our project to develop the most common kind of layout. Flutter, we can define a list of items through ListView, supports vertical and horizontal display. By controlling a display direction can attribute list. There are a list of the following categories:
- Vertical list
- Vertical Text Display List
- Horizontal list
- Dynamic list
- Matrix list
The list of parameters
In flutter, the categories include the following components ListView optional parameters:
- scrollDirection: Axis.horizontal horizontal vertical list listing Axis.vertical
- padding: padding
- resolve: reverse sorting assembly
- children: list element
The basic list
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: HomeContent(),
));
}
}
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return ListView( padding: EdgeInsets.all(10), children: <Widget>[ Image.network("http://pic18.nipic.com/20120204/8339340_144203764154_2.jpg"), Container( child: Text( '我是一个标题', textAlign: TextAlign.center, style: TextStyle( fontSize: 28, ), ), height:60 , padding: EdgeInsets.fromLTRB ( 0, 10, 0, 10 ), ), Image.network ( "http://pic1.nipic.com/2009-02-17/200921701719614_2.jpg" ), Container ( Child: Text ( 'I'm a title' , textAlign: TextAlign.center, style: TextStyle ( fontSize: 28 , ), ), height: 60 , padding: EdgeInsets.fromLTRB ( 0, 10, 0, 10 ), ), Image. network ("http://pic9.nipic.com/20100923/2531170_140325352643_2.jpg" ), Container ( Child: Text ( 'I'm a title' , textAlign: TextAlign.center, style: TextStyle ( fontSize: 28 , ), ), height: 60 , padding: EdgeInsets.fromLTRB ( 0, 10, 0, 10 ), ), Image.network ( "http://pic37.nipic.com/20140110/17563091_221827492154_2.jpg" ), Container( Child: Text ( 'I is a title ' , textAlign: TextAlign.center, style: the TextStyle ( the fontSize: 28 , ), ), height: 60 , padding: EdgeInsets.fromLTRB ( 0, 10, 0, 10 ), ), ] , ); } }
In the ListView component, you can put Container, Text, Image, and many other components, but usually show list when using ListTile component, this component can be configured title, subheadings, pictures and more.
the extends StatelessWidget HomeContent {class @override the Widget Build (BuildContext context) { return the ListView ( padding: EdgeInsets.all ( 10 ), Children: <the Widget> [ ListTile ( title: the Text ( 'North South Huanghuai high temperature duration managing strong heavy rainfall debut ' , style: TextStyle ( fontSize: 24- ), ), SUBTITLE: Text ( "China Weather Reuters 21 start, the first round of the North kicked off a wide range of high temperatures this year, the high temperature yesterday was the most prosperous stage of development" ), ) , ListTile ( title: Text ( 'China 13 airlines operating Boeing 737MAX have a claim field', Style: TextStyle ( fontSize: 24- ),), SUBTITLE: Text ( "China Weather Reuters began on the 21st, the first round of the North kicked off a wide range of high temperatures this year, yesterday was the most prosperous stage of development of high-temperature" ), ), ListTile ( title: Text ( 'China and China 13 airlines operating Boeing 737MAX have a claim on stage' ), SUBTITLE: Text ( "China Weather Reuters 21 start, the first round of the North this year, a wide range of high temperature kicked off, yesterday was the high temperature most prosperous stage of development " ), ), ListTile ( title: Text ( 'high temperature and rain in North China Huanghuai managing strong debut' ), SUBTITLE: Text ( " China Weather Reuters began on the 21st, the first round of the North this year a wide range of high temperature pull opening prologue, yesterday was the most prosperous stage of development of high-temperature " ), ), ListTile ( title: Text ( 'North Huanghuai high temperature continuous potential debut' ), SUBTITLE: Text ( "China Weather Reuters began on the 21st, the first round of the North kicked off a wide range of high temperatures this year, yesterday was the most prosperous stage of development of high-temperature" ), ), ListTile ( title: Text ( 'strong debut from North China Huanghuai high temperature' ), SUBTITLE: Text ( "China Weather Reuters 21 start, the first round of the North kicked off a wide range of high temperatures this year, yesterday was the most prosperous development of high temperature stage " ), ), ListTile ( title: Text ( 'North Huang-Huai Gao Yu managing strong debut' ), SUBTITLE: Text ( " China Weather Reuters began on the 21st, the first round of the North this year, a wide range of high temperature kicked off, yesterday was the high temperature most prosperous stage of development " ), ), ListTile ( title: Text ( 'North China Huanghuai southern high temperature continuous heavy rainfall managing strong debut ' ), SUBTITLE: Text ( "China Weather Reuters began on the 21st, the first round of the North kicked off a wide range of high temperatures this year, yesterday was the most prosperous stage of development of high-temperature" ), ) ], ); } }
You can also add an icon in the above list, add the text in front of the icon using the leading, trailing behind the use of the add icon
the extends StatelessWidget HomeContent {class @override the Widget Build (BuildContext context) { return the ListView ( padding: EdgeInsets.all ( 10 ), Children: <the Widget> [ ListTile ( leading: Icon (Icons.settings, size: 40 ), title: the Text ( 'high temperature and rain in North China Huanghuai managing strong debut' ), SUBTITLE: Text ( "China Weather Reuters on the 21st began, North Huanghuai strong debut for managing high-temperature rain" ), ), ListTile ( title: Text ( 'North Huang Huai strong debut for managing high-temperature rain ' ), SUBTITLE: Text ( "China Weather Reuters began on the 21st, the Huang-Huai high temperature rain north managing strong debut"), Trailing: Icon (Icons.home), ), ListTile ( leading: Icon (Icons.pages), title: Text ( 'high temperature and rain in North China Huanghuai managing strong debut' ), SUBTITLE: Text ( "China Weather Reuters 21 began, North Huanghuai strong debut for managing high-temperature rain " ), ), ListTile ( leading: Icon (Icons.settings), title: Text ( 'high temperature and rain in North China Huanghuai managing strong debut' ), SUBTITLE: Text ( "China Weather Reuters began 21, North Huanghuai strong debut for managing high-temperature rain" ), ), ListTile ( leading: Icon (Icons.home, Color: Colors.yellow,), title: Text ('North Huang-Huai strong debut for managing high-temperature rain' ), SUBTITLE: Text ( "China Weather Reuters began 21, North Huanghuai strong debut for managing high-temperature rain" ), ), ListTile ( leading: Icon (Icons.pages) , title: Text ( 'high temperature and rain in North China Huanghuai managing strong debut' ), SUBTITLE: Text ( "China Weather Reuters 21 began, North Huanghuai strong debut for managing high-temperature rain" ), ) ], ); } }
In addition to adding custom icons, you can also add local and remote image:
Horizontal list
In ListView, you can use scrollDirection to control the horizontal or vertical list of lists, default vertical list, when to show the level of the list, you need to add scrollDirection: Axis.horizontal
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Container( height: 180, child: ListView( scrollDirection: Axis.horizontal, children: <Widget>[ Container( width: 180.0, color: Colors.red, ), Container( width: 180.0, color: Colors.orange, child: ListView( children: <Widget>[ Image.network("http://pic25.nipic.com/20121205/10197997_003647426000_2.jpg"), Text('我是一个文本') ], ), ), Container( width: 180.0, color: Colors.blue, ), Container( width: 180.0, color: Colors.deepOrange, ), Container( width: 180.0, color: Colors.deepPurpleAccent, ), ], ), ); } }
需要注意的是，在水平列表中，列表项的高度是等于ListView组件的高度的，也就是说，为ListView组件里面的列表项添加高度是没有用的，所以，如果要控制水平列表的高度，需要在ListView组件的父组件里面设置高度，上面Container里面设置的高度就是用来控制水平列表的高度，垂直列表的宽度同理。