Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )
Already have a clear understanding of the ListView, also made plain portrait (vertical list). Here we look at how the lateral list to use. In fact, we still use the ListView components, only a ListView component in Riga ScrollDirectionproperty.
Man of few words said, Demo source code as follows:
import 'package:flutter/material.dart';
//主函数（入口函数）
void main() {
runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
//重写build方法
@override
Widget build(BuildContext context) {
//返回一个material风格的组件
return MaterialApp(
title: 'Welcome to Flutter',
//Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
home: Scaffold( //home ： 应用默认所显示的界面 Widget
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Container(
height: 200.0,
child: MyList(),
),
)
),
theme: new ThemeData(primaryColor: Colors.red), // 设置主题颜色
);
}
}
class MyList extends StatelessWidget{ //定义一个显示ListView类
@override
Widget build(BuildContext context){
return ListView(
scrollDirection: Axis.horizontal,//横向滚动
children: <Widget>[ //列表子布局
new Container(
width: 360.0,
color: Colors.lightBlue,
),
new Container(
width: 360.0,
color: Colors.deepOrange,
),
new Container(
width: 360.0,
color: Colors.deepPurpleAccent,
),
new Container(
width: 360.0,
color: Colors.yellowAccent,
),
new Container(
width: 360.0,
color: Colors.black38,
),
],
);
}
}Code Description: first joined Center component, is to let the lateral position of the list can be centered to the middle of the screen, then added to the following components center Container container assembly, the container assembly and set 200 is high. The list of components is independently defined as a class, then we added to the main assembly. In the components will work points is very small, so there are both good reuse easy to maintain, but also help the division, I personally really like this form Flutter Everything assembly. We declare a class MyList, and then nested code into this class. Finally, using this class directly MyAPP class, thus reducing nesting.
Note that knowledge:
scrollDirection property:
ListView component scrollDirectionattribute has only two values, one is horizontal scrolling, vertical scrolling is a. The default is the vertical scrolling, so if it is vertical scrolling, we generally do not set.
- Axis.horizontal: horizontal scrolling or called horizontal scrolling.
- Axis.vertical: called vertical scrolling or vertical scrolling.
Run shot:
