Flutter控件篇：ListView(1)

最新推荐文章于 2024-08-24 08:41:27 发布

原创最新推荐文章于 2024-08-24 08:41:27 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #Listview

flutter 专栏收录该内容

0 篇文章

订阅专栏

本文探讨了Flutter中的ListView控件，包括如何创建一个基本的ListView，以及如何通过设置scrollDirection属性实现横屏滚动效果。

一个基本的ListView

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Basic List';

    return new MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: new AppBar(
         title:new Text(title),
        ),
        body:new ListView(
          children: <Widget>[
            new ListTile(
              leading: new Icon(Icons.map),
              title: new Text('Map'),
            ),
            new ListTile(
              leading: new Icon(Icons.photo),
              title: new Text('Album'),
            ),
            new ListTile(
              leading: new Icon(Icons.phone),
              title: new Text('Phone'),
            ),
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述
横屏的ListView，在创建ListView时，设置scrollDirection为水平方向以覆盖默认的垂直方向。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Horizontal List';

    return new MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(title),
        ),
        body: new Container(
          margin: new EdgeInsets.symmetric(vertical: 20.0),
          height: 200.0,
          child: new ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              new Container(
                width: 160.0,
                color: Colors.red,
              ),
              new Container(
                width: 160.0,
                color: Colors.blue,
              ),
              new Container(
                width: 160.0,
                color: Colors.green,
              ),
              new Container(
                width: 160.0,
                color: Colors.yellow,
              ),
              new Container(
                width: 160.0,
                color: Colors.orange,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述