【自学Flutter】20.1 ListView的使用

20.1 ListView的使用

1.源代码

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Scrollbar(
            child: Center(
              child: ListView(
                shrinkWrap: true,
                padding: EdgeInsets.all(20.0),
                children: <Widget>[
                  Text('我是第一个项目',textScaleFactor: 5.0,),
                  Text('我是第二个项目',textScaleFactor: 5.0,),
                  Text('我是第三个项目',textScaleFactor: 5.0,),
                  Text('我是第四个项目',textScaleFactor: 5.0,),
                ],
              ),
            )
          ),
        )
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Scrollbar(
            child: Center(
              child: ListView(
                //是否根据子widget的总长度来设置ListView的长度,默认值为false
                shrinkWrap: true,
                padding: EdgeInsets.all(20.0),
                children: <Widget>[
                  Text('我是第一个项目',textScaleFactor: 5.0,),
                  Text('我是第二个项目',textScaleFactor: 5.0,),
                  Text('我是第三个项目',textScaleFactor: 5.0,),
                  Text('我是第四个项目',textScaleFactor: 5.0,),
                ],
              ),
            )
          ),
        )
    );
  }
}

3.效果图

【自学Flutter】20.1 ListView的使用_第1张图片

你可能感兴趣的:(自学Flutter)