Flutter/기본

[Flutter / 기본] ListTile

익은벼 2022. 7. 19. 08:06
반응형

ListTile은 주로 ListView 의 각 항목을 표현하는

Text나 Icon 등을 나열하는데 사용된다.

child: ListView.builder(
    itemCount: _foundBleUARTDevices.length,
    itemBuilder: (BuildContext context, int index) => Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16.0),
      ),
      elevation: 4.0,
      child: ListTile(
        dense: true,
        enabled: !(!_connected && _scanning),
        trailing: GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: () {
            //(!_connected && _scanning) || (!_scanning && _connected)? (){}: onConnectDevice(index);
          },
          child: Container(
            width: 48,
            height: 48,
            padding: const EdgeInsets.symmetric(vertical: 4.0),
            alignment: Alignment.center,
            child: const Icon(Icons.add_link),
          ),
        ),
        subtitle: Text(_foundBleUARTDevices[index].id),
        title: Text("${_foundBleUARTDevices[index].name}",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Colors.black)),
      ),
    ),
  ),

- dense 속성은 위젯의 밀집 여부를 설정한다. true 또는 false값을 사용하며,

  true로 설정할 경우 해당 ListTile의 높이와 내부의 Text나 icon을 포함한 약간씩 작아진다.

- enabled은 ListTile이 상호작용을 하는 즉, 대화형인지 설정한다.

  true 또는 false 값을 사용하며, false인 경우 ListTile은 현재 ListTile 테마의

  비활성화된 색상으로 스타일이 지정되고, onTap 및 onLongPress 콜백이 작동하지 않는다.

- leading은 ListTile의 앞부분에 배치할 위젯을 설정한다.

- trailing은 ListTile의 뒷부분에 배치할 위젯을 설정한다.

- title은 ListTile의 주요 내용으로 leading의 내용과 trailing 내용 중간에 배치되는 위젯이다.

- subtitle은 title의 아래에 작게 표현되는 위젯이다.

- onTap 사용자가 ListTile을 터치했을 때 호출되는 콜백을 정의한다.

  (위에서 예를 든 onTap은 ListTile을 탭했을 때 수행되는 것이 아니라,

    trailing을 탭했을 때 수행된다.)

반응형