flutter组件 Tooltip,Card,LinearProgressIndicator,CircularProgressIndicator,Divider

1.Tooltip

const Tooltip({
    Key key,
    @required this.message,  //提示的内容
    this.height = 32.0,  //Tooltip的高度
    this.padding = const EdgeInsets.symmetric(horizontal: 16.0), //间距
    this.verticalOffset = 24.0, //具体内部child Widget竖直方向的距离 类似margin
    this.preferBelow = true, //是否显示在下面
    this.excludeFromSemantics = false,
    this.child,
}) 

Tooltip(
   message: "这是文案",
   child: Icon(Icons.person_pin_circle),
)

长按出现文案： 

   

 

 2.Card

 const Card({
    Key key,
    this.color, //背景色
    this.elevation, //阴影
    this.shape, //形状
    this.borderOnForeground = true,
    this.margin, //间距
    this.clipBehavior,
    this.child, //子集
    this.semanticContainer = true,
 })

 Card(
   elevation: 5.0,
   child: Container(
       width: 100.0,
       height: 100.0,
       alignment: Alignment.center,
       child: Text("测试Card"),
   ),
 )

3.LinearProgressIndicator

const LinearProgressIndicator({
    Key key,
    double value, //值 如果为null,就是一个一直跑的进度条
    Color backgroundColor, //背景色
    Animation<Color> valueColor, //进度的颜色
    String semanticsLabel,
    String semanticsValue,
})

 

LinearProgressIndicator(
   value: .5,
   backgroundColor: Colors.greenAccent,
   valueColor: AlwaysStoppedAnimation(Colors.red),
),


LinearProgressIndicator(
   value: null,
   backgroundColor: Colors.greenAccent,
   valueColor: AlwaysStoppedAnimation(Colors.red),
)

null：

   

4.CircularProgressIndicator

 const CircularProgressIndicator({
    Key key,
    double value, 
    Color backgroundColor,
    Animation<Color> valueColor,
    this.strokeWidth = 4.0, //线条宽度
    String semanticsLabel,
    String semanticsValue,
 })

 

//SizedBox 控制大小  
SizedBox(
    width: 100.0,
    height: 100.0,
    child: CircularProgressIndicator(
       value: .5,
       backgroundColor: Colors.greenAccent,
       valueColor: AlwaysStoppedAnimation(Colors.red),
    ),
 )

5.Divider

const Divider({
    Key key,
    this.height = 16.0, //高度
    this.indent = 0.0, //距离左边
    this.color, //颜色
}) 

 

Divider(
   height: 100.0,
   color: Colors.red,
   indent: 16.0,
),
Text("222")