编程知识 cdmana.com

Flitter listtile - flutter weekly components

flutter_week

This article belongs to 【Flutter Every Monday components 】 series , Other components can view the articles in this series , The series will be updated continuously ; All components of demo Values have been uploaded Github: https://github.com/xj124456/flutter_widget_demo welcome Star

Blog : Think no , Nuggets , You know , Simple books , MOOC , CSDN, Blog Garden , DX front end
official account :DX Front end framework Repository
Contact me : Click on the official account menu to contact me

Use scenarios

  1. Component interpretation : A single line of fixed height , Usually contains some text as well as leading or trailing icons .
  2. When you need to give a list list When , You can use it. ListTile To achieve , It can display elements line by line , And you can bind events to each element , One ListTile It's a line

preview

Component parameter description

const ListTile({
    Key key,
    this.leading, // The components on the left 
    this.title, // The main title in the middle 
    this.subtitle, // The subtitle in the middle 
    this.trailing, // Right side assembly , It's usually a value or an icon 
    this.isThreeLine = false, // Whether to display three lines 
    this.dense, // Whether to display in a vertical dense way , So the text will be smaller 
    this.visualDensity,
    this.shape, // Define the appearance shape 
    this.contentPadding, // Margin between content and border , Default 16
    this.enabled = true, // Whether you can interact with Events 
    this.onTap, // Click event 
    this.onLongPress, // Long press event 
    this.mouseCursor, // Mouse over ListTile The treatment effect of the above-mentioned process , to web With 
    this.selected = false, // If it is true, Text and icons will be rendered in the same color 
    this.focusColor, 
    this.hoverColor, // The pointer hovered over ListTile The color on 
    this.focusNode, // Focus on events 
    this.autofocus = false, // Whether to focus by default 
    this.tileColor, //listTile Background color ,selected=false Effective when 
    this.selectedTileColor, //listTile Background color ,selected=true Effective when 
  })

Case code

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('Flutter ListTile'),
            Text(
              'Flutter Every Monday components (by DX front end )',
              style: TextStyle(
                fontSize: 12.0,
              ),
            )
          ],
        ),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ListTile(
            leading: Icon(Icons.graphic_eq),
            title: Text(' This is the main title '),
            trailing: Icon(Icons.chevron_right),
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.waves),
            title: Text(' This is the main title '),
            subtitle: Text(' This is the subtitle '),
            trailing: Icon(Icons.chevron_right),
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.ballot),
            title: Text(' This is the main title '),
            // isThreeLine: true, // When the text exceeds, it will default to wrap 
            subtitle: Text(' This is the subtitle, two lines , This is the subtitle, two lines , This is the subtitle, two lines , This is the subtitle, two lines , This is the subtitle, two lines '),
            trailing: Icon(Icons.chevron_right),
          ),
          Divider(),
        ],
      )),
    );
  }

Feel useful ? Collect if you like , By the way, I'd like to say something nice , Your support is my greatest encouragement ! WeChat search the official account [DX Front end framework Repository ], Find more Vue, React, Flutter, Uniapp, Nodejs, Html/Css Wait for front-end knowledge and actual combat .

DX front end , Share the front-end framework knowledge base , The article is detailed in :DX front end

 Focus on DX front end

版权声明
本文为[Ben Xiong]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224214732647n.html

Scroll to Top