07Flutter ListView基础列表组件、水平列表组件、图标组件

客官°小女子只卖身不卖艺 2023-08-17 15:58 128阅读 0赞

ListView:

ListView:参数

scrollDirection:Axis.horizontal:水平列表。Axis.vertical垂直列表

padding:内边距。

resolve:组件反向排序

children:List<Widget>   列表元素

垂直列表组件：

main.dart

import 'package:flutter/material.dart';
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('flutter demo'),
            ),
            body: HomeContent(),
          ),
        );
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return ListView(
          padding: EdgeInsets.all(10),
          //垂直列表：
          scrollDirection: Axis.vertical,
          children: <Widget>[
            ListTile(
              leading:
                  Icon(Icons.settings, color: Colors.blue, size: 30), //前面的图标：
              title: Text('北京音乐学院', style: TextStyle(fontSize: 18)),
              subtitle: Text('子标题'),
              trailing: Icon(Icons.settings, color: Colors.yellow, size: 30),
            ),
            ListTile(
              leading:Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover), //前面的图标：
              title: Text('美国农民：对华贸易战已让我损失40万美元', style: TextStyle(fontSize: 18)),
              subtitle: Text('美国《新闻周刊》8月27日文章，原题：北达科他州农民表示，倘若特朗普不会因贸易战在其农场所在地区“失去100%”的支持，那么“人们就疯了”  那些在经济上遭受特朗普对华贸易政策重创的美国农民警告称，美国对华贸易战正使特朗普在其“农村票仓”失去大量支持，而正是来自农村的选票曾将他送进白宫。')
            ),
            Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover),
            Container(
              height: 40,
              padding: EdgeInsets.fromLTRB(0, 10,0,10),
              child: Text(
                '我是一个标题',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 18
                ),
              ),
            ),
            Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover)
          ],
        
        );
      }
    }

水平列表组件：

import 'package:flutter/material.dart';

/\*

ListView:参数

scrollDirection:Axis.horizontal:水平列表。Axis.vertical垂直列表

padding:内边距。

resolve:组件反向排序

children:List<Widget>   列表元素

\*/

void main() \{

runApp(MyApp());

class MyApp extends StatelessWidget \{