iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
Mobile Development

Dart & Flutter - 學寫App | 菜鳥筆記 | 堅持30天挑戰系列 第 7

Flutter 常用組件講解 | ListViewWidget

ListViewWidget 清單組件講解

ListView 元件的使用

  • 基本 Flutter 框架
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IMooc Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('ListView Widget'),
        ),
        body: new Text('LestView'),
      ),
    );
  }
}
  1. ListView 組件的語法講解
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IMooc Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('ListView Widget'),
        ),
        body: new ListView(children: <Widget>[
          new ListTile(
            leading: new Icon(Icons.favorite),
            title: new Text('favorite'),
          ),           // 列表組件,返回一個數組
        ]),
      ),
    );
  }
new ListTile(
  leading: new Icon(Icons.favorite),
  title: new Text('favorite'),
), // 列表組件,返回一個數組
new ListTile(
  leading: new Icon(Icons.audiotrack),
  title: new Text('audiotrack'),
),
new ListTile(
  leading: new Icon(Icons.beach_access),
  title: new Text('beach_access'),
),
new ListTile(
  leading: new Icon(Icons.android),
  title: new Text('android'),
),
  1. ListTile 的使用
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IMooc Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('ListView Widget'),
        ),
        body: new ListView(children: <Widget>[
          new ListTile(
            leading: new Icon(Icons.favorite),
            title: new Text('favorite'),
          ), // 列表組件,返回一個數組
          new ListTile(
            leading: new Icon(Icons.audiotrack),
            title: new Text('audiotrack'),
          ),
          new ListTile(
            leading: new Icon(Icons.beach_access),
            title: new Text('beach_access'),
          ),
          new ListTile(
            leading: new Icon(Icons.android),
            title: new Text('android'),
          ),
        ]),
      ),
    );
  }
  1. 小實例 做一個圖片列表
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IMooc Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('ListView Widget'),
        ),
        body: new ListView(children: <Widget>[
          new Image.network(
              'https://n.sinaimg.cn/transform/20141121/avxeafr4995788.jpg'),
          new Image.network(
              'https://i.ytimg.com/vi/7g_zGtH13LY/maxresdefault.jpg'),
          new Image.network('https://i.imgur.com/XoBbu9D.jpg'),
          new Image.network(
              'https://jefferic.files.wordpress.com/2015/03/penguins-of-madagascar.jpg'),
        ]),
      ),
    );
  }
listView listView-icon listView-images
listView listView-icon listView-images

上一篇
Flutter 常用組件講解 | ImageWidget
下一篇
Flutter 常用組件講解 | ListViewWidget 補充
系列文
Dart & Flutter - 學寫App | 菜鳥筆記 | 堅持30天挑戰12

尚未有邦友留言

立即登入留言