Flutter第六弹 基础列表ListView

目标:

1)Flutter有哪些常用的列表组建

2)怎么定制列表项Item?

一、ListView简介

使用标准的 ListView 构造方法非常适合只有少量数据的列表。我们还将使用内置的 ListTile widget 来给我们的条目提供可视化结构。ListView支持横向列表和纵向列表。

ListTile相当于列表项 Item,可以定制列表项内容。

例如:可以在ListView的属性children中定义 ListTile组件列表。

ListView(
  children: const <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
),

1.1 ListView属性

padding属性

padding定义控件内边距

padding: EdgeInsets.all(8.0),

children属性

children属性是定义列表项Item,是一个ListTile列表。

scrollDirection属性

ListView列表滚动方向。包括:

Axis.vertical: 竖直方向滚动,对应的是纵向列表。

  Axis.horizontal: 水平方向滚动,对应的是横向列表。

1.2 ListTile组件

常用的ListView项,包含图标,Title,文本,按钮等。

class ListTile extends StatelessWidget {

ListTile是StatelessWidget,常用的一些属性:

leading属性

标题Title之前Widget,通常是 Icon或者圆形图像CircleAvatar 组件。

ListTile(
            leading: Icon(Icons.photo_album), // 标题图片
            title: Text('Album'),
          ),

title属性

列表Item标题。

titleTextStyle属性

标题文本样式

titleAlignment属性

标题文本的对齐属性

subtitle属性

subtitle 副标题,显示位置位于标题之下。

ListTile(
            leading: Icon(Icons.photo_album), // 标题图片
            title: Text('Album'),
            subtitle: Text('手机历史相册'),
          ),

subtitleTextStyle属性

副标题文本样式

isThreeLine属性

布尔值,指示是否为三行列表项。如果为 true,则可以显示额外的文本行。否则,只有一行文本。

dense属性

是否是紧凑布局。布尔型,紧凑模式下,文本和图标的大小将减小。

textColor属性

文本颜色

contentPadding属性

内容区的内边距

enabled属性

布尔值,指示列表项是否可用。如果为 false,则列表项将不可点击

selected属性

布尔值,指示列表项是否已选择。列表选择时有效

focusColor属性

获取焦点时的背景颜色。

hoverColor属性

鼠标悬停时的背景颜色。

splashColor属性

点击列表项时的水波纹颜色。

tileColor属性

列表项的背景颜色

selectedTileColor属性

选中列表项时的背景颜色。

leadingAndTrailingTextStyle属性

前导和尾部部分文本的样式。

enableFeedback属性

是否启用触觉反馈。

horizontalTitleGap属性

标题与前导/尾部之间的水平间距。

minVerticalPadding属性

最小垂直内边距

minLeadingWidth属性

最小前导宽度

二、定制ListView的子项Item

ListView可以展现简单的列表。如果子项包括有状态更新,和原来一样,可以在State中进行状态更新。

2.1 竖直列表

对应的代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // TRY THIS: Try running your application with "flutter run". You'll see
        // the application has a purple toolbar. Then, without quitting the app,
        // try changing the seedColor in the colorScheme below to Colors.green
        // and then invoke "hot reload" (save your changes or press the "hot
        // reload" button in a Flutter-supported IDE, or press "r" if you used
        // the command line to start the app).
        //
        // Notice that the counter didn't reset back to zero; the application
        // state is not lost during the reload. To reset the state, use hot
        // restart instead.
        //
        // This works for code too, not just values: Most code changes can be
        // tested with just a hot reload.
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // TRY THIS: Try changing the color here to a specific color (to
        // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
        // change color while the other colors stay the same.
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: ListView(
        children: [
          const ListTile(
            leading: Icon(Icons.map), // 标题图片
            title: Text('Map'),
          ),
          ListTile(
            leading: Icon(Icons.photo_album), // 标题图片
            title: Text('Album'),
          ),
          ListTile(
            leading: Icon(Icons.photo_camera), // 标题图片
            title: Text('Camera'),
          ),
          ListTile(
            leading: Icon(Icons.countertops), // 标题图片
            title: Text(
              '当前计数$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

2.2 水平列表

ListView设置显示水平布局,增加属性 scrollDirection: Axis.horizontal, 则显示水平列表。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const title = 'Horizontal List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: Container(
          margin: const EdgeInsets.symmetric(vertical: 20),
          height: 200,
          child: ListView(
            // This next line does the trick.
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 160,
                color: Colors.red,
              ),
              Container(
                width: 160,
                color: Colors.blue,
              ),
              Container(
                width: 160,
                color: Colors.green,
              ),
              Container(
                width: 160,
                color: Colors.yellow,
              ),
              Container(
                width: 160,
                color: Colors.orange,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在层级组件Stack中,当键盘TextField的输入框获取焦点时,由于软键盘的出,可能会导致内容被顶上去的情况。解决这个问题的方法很简单,只需要在Stack组件中添加一个属性resizeToAvoidBottomInset并设置为false即可。这样做可以防止键盘出时内容被顶上去。例如: ```dart Stack( resizeToAvoidBottomInset: false, children: \[ // 其他组件 TextField(), // 其他组件 \], ) ``` 通过设置resizeToAvoidBottomInset为false,可以确保键盘出时不会影响到Stack中的其他组件的位置。这样就解决了软键盘出时提高ListView的问题。\[1\] #### 引用[.reference_title] - *1* *3* [【Flutter 问题系列第 16 篇】如何防止软键盘出后顶掉内容](https://blog.csdn.net/qq_42351033/article/details/116091208)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [正确使用FlutterListview](https://blog.csdn.net/qq_41628942/article/details/129127387)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值