Flutter Card、ListTitle-有解無憂

It is expected that the. 可望而不可即.

color 卡片背景顏色

Card(
  color: Colors.blue.withOpacity(0.4),
  child: Padding(
    padding: EdgeInsets.all(30.0),
    child: Text('FLUTTER CARD'),
  ),
)

shadowColor 陰影顏色 + elevation 陰影Z坐標

Card(
  color: Colors.blue,
  elevation: 20.0,
  shadowColor: Colors.red,
  child: Padding(
    padding: EdgeInsets.all(30.0),
    child: Text('FLUTTER CARD'),
  ),
)

 Card(
        color: Colors.blue,
        elevation: 40.0,
        shadowColor: Colors.red,
        child: Padding(
          padding: EdgeInsets.all(30.0),
          child: Text('FLUTTER CARD'),
        ),
      )

shape 邊框

Card(
        color: Colors.blue,
        shape: RoundedRectangleBorder(
            side: BorderSide(width: 2.0, color: Colors.black)),
        child: Padding(
          padding: EdgeInsets.all(30.0),
          child: Text('FLUTTER CARD'),
        ),
      )

RoundedRectangleBorder 圓角矩形邊框

Card(
        color: Colors.blue,
        shape: ContinuousRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
            side: BorderSide(width: 2.0, color: Colors.black)),
        child: Padding(
          padding: EdgeInsets.all(30.0),
          child: Text('FLUTTER CARD'),
        ),
      )

點擊產生圓角擴散效果

Card(
  child: InkWell(
    splashColor: Colors.red.withAlpha(30),
    onTap: () {

    },
    child: Container(
      width: 300,
      height: 100,
      alignment: Alignment.center,
      child: Text('可以被點擊的卡片,點擊產生紅色圓角的效果'),
    ),
  ),
)

Card(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const ListTile(
                title: Text('ListTitle One'),
                subtitle: Text('ListSubTitle One'),
              ),
              const ListTile(
                title: Text('ListTitle Two'),
                subtitle: Text('ListSubTitle Two'),
              ),
              const ListTile(
                title: Text('ListTitle Three'),
                subtitle: Text('ListSubTitle Three'),
              ),
            ],
          ),
        ),

參考：Flutter Card Flutter ListTitle

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/261027.html

標籤：區塊鏈

上一篇：祝開工大吉！開年你不可錯過的CROSS盲盒游戲

下一篇：Go并發編程-RWMutex