fluuter学习之旅 - 列表组件

LisrView列表组件

普通列表

import 'package:flutter/material.dart';
import 'package:flutter_test01/myfont.dart'; //自定义的包导入格式:import 'package:项目名/dart名称,dart'

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("我的应用 - ICON"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const [
        SizedBox(
          height: 100,
        ),
        Text("你好1"),
        SizedBox(
          height: 100,
        ),
        Text("你好2"),
        SizedBox(
          height: 100,
        ),
        Text("你好3"),
        SizedBox(
          height: 100,
        ),
        Text("你好4"),
        SizedBox(
          height: 100,
        ),
        Text("你好5"),
        SizedBox(
          height: 100,
        ),
        Text("你好6"),
      ],
    );
  }
}

Icon列表

ListTitle组件

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const <Widget>[
        //<Widget>
        ListTile(
          leading: Icon(
            MyFont.bilibili,
            size: 20,
            color: Colors.blue,
          ),
          title: Text("我的bilibili"),
        )
      ],
    );
  }
}

Icon组件请参考

图文列表

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        //<Widget>
        ListTile(
          leading: Image.network("http://124.223.18.34:5555/static/images/gdyg/gdygFM.jpg"),
          title: const Text("孤独摇滚"),
          subtitle: const Text("看到波奇酱,让社恐的你身临其境"),
        )
      ],
    );
  }
}

添加Image请参考

可滑动的水平列表

列表组件常用参数

名称	类型	说明
scrollDirection	Axis	Axis.horizontal水平列表,Axis.vertical垂直列表
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
children	List	列表元素

动态列表

定义List的方法

List listData = [/*{...},{...}*/];
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  List<Widget> _initListData(){
    var list = listData.map((value){
      return ListTile(
          leading: Image.network(value["valueName"]),
          title: const Text(value["valueName"]),
          subtitle: const Text(value["valueName"]),
        )
    })
    return list.toList()
  }
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        //<Widget>
        
      ],
    );
  }
}