Flutter listview

最新推荐文章于 2024-08-27 08:18:43 发布

Magic_小小阿昕

最新推荐文章于 2024-08-27 08:18:43 发布

阅读量261

点赞数

分类专栏：前端 knowledge 文章标签： Flutter listview

本文链接：https://blog.csdn.net/Amo__/article/details/90229938

版权

前端 knowledge 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

ListView 列表组件

使用了ListView，然后在他的内部children中，使用了widget数组，因为是一个列表，所以它接受一个数组，然后有使用了listTite组件（列表瓦片），在组件中放置了图标和文字。
放入图标和文字

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Hello world',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter')
        ),
        body: new ListView(
          children:<Widget>[
            new ListTile(
              leading:new Icon(Icons.access_time),
              title:new Text('access_time')
            ),
            new ListTile(
              leading:new Icon(Icons.account_balance),
              title:new Text('account_balance')
            ),
          ]
        ),
      ),
    );
  }
}

放入多个图片

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Hello world',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter')
        ),
        body: new ListView(
          children:<Widget>[
            new Image.network(
             'http://pic.58pic.com/58pic/15/11/51/20E58PICNs4_1024.jpg'
            ),
            new Image.network(
             'http://pic.58pic.com/58pic/15/11/51/20E58PICNs4_1024.jpg'
            ),
          ]
        ),
      ),
    );
  }
}