「Flutter/UI/ListTile」の版間の差分

2019年11月27日 (水) 01:56時点における版

ListTileとは

ListViewの１行を表す。

サンプル

ListTile(
  title: Text("リスト1",
    style: TextStyle(
      locale: Locale("ja", "JP"),
    )
  ),
  trailing: Icon(Icons.keyboard_arrow_right),
  onTap: () {
     // tap時の挙動
  },
);

上下にボーダーのあるListTail

Container(
  padding: const EdgeInsets.all(0.0),
  decoration: BoxDecoration(
    border: Border(
      top: BorderSide(
        color: Colors.black45,
        width: 1.0,
      ),
      bottom: BorderSide(
        color: Colors.black45,
        width: 1.0,
      ),
    ),
  ),
  child: ListTile(
    title: Text("リスト1",
        style: TextStyle(
          locale: Locale("ja", "JP"),
        )
    ),
    trailing: Icon(Icons.keyboard_arrow_right),
    onTap: () {
      _navigatorResetPage();
    }, //
  ),
),

小技

heightで高さ幅を小さくできる。

new Container(
                height: 56.0,
                color: Colors.white,
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: new ListTile(
                        leading: new CircleAvatar(
                          backgroundColor: StaticFunction.toColorByStr(
                              listdatas[index].color),
                          child: new Text(listdatas[index].thumbtitle,),
                          foregroundColor: Colors.white,
                        ),
                        title: new Text(listdatas[index].title,
                          style: TextStyle(
                              locale: Locale("ja", "JP")
                          ),
                        ),
                        subtitle: new Text(
                          listdatas[index].subtitle,
                          style: TextStyle(
                            locale: Locale("ja", "JP"),
                            fontSize: 10,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),