Flutter:如何为 ListTile 添加边框

为了在 Flutter 中为ListTile小部件添加边框,您可以将其shape属性分配给RoundedRectangleBorderBeveledRectangleBorderStadiumBorder。 您可以控制边框的 粗细颜色半径。让我们看下面的例子更清楚。

Flutter:如何为 ListTile 添加边框

代码:

Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
        // implement add ListView that contains multiple ListTiles
        child: ListView(
          children: [
            // using StadionBorder
            const ListTile(
              shape: StadiumBorder(
                side: BorderSide(color: Colors.blue, width: 1),
              ),
              iconColor: Colors.blue,
              leading: Icon(
                Icons.shop,
                size: 30,
              ),
              title: Text('Item One'),
              subtitle: Text('StadionBorder'),
              trailing: Icon(
                Icons.play_arrow,
                size: 30,
              ),
            ),
            const SizedBox(
              height: 30,
            ),

            // Using BeveledRectangleBorder
            const ListTile(
              shape: BeveledRectangleBorder(
                side: BorderSide(color: Colors.green, width: 1),
              ),
              iconColor: Colors.green,
              leading: Icon(
                Icons.run_circle,
                size: 30,
              ),
              title: Text('Item Two'),
              subtitle: Text('BeveledRectangleBorder'),
              trailing: Icon(
                Icons.play_arrow,
                size: 30,
              ),
            ),
            const SizedBox(
              height: 30,
            ),

            // Using RoundedRectangleBorder
            ListTile(
              shape: RoundedRectangleBorder(
                side: const BorderSide(color: Colors.orange, width: 4),
                borderRadius: BorderRadius.circular(15),
              ),
              iconColor: Colors.orange,
              leading: const Icon(
                Icons.light,
                size: 30,
              ),
              title: const Text('Item Two'),
              subtitle: const Text('RoundedRectangleBorder'),
              trailing: const Icon(
                Icons.play_arrow,
                size: 30,
              ),
            ),
          ],
        ),
      ),
);
免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » Flutter:如何为 ListTile 添加边框