Day06 - Flutter 常用的基础 Widget（上）

Text(
   "秋风用时光的旋律，用桂花的芬芳、苹果的馨香、菊花的灿烂、牵牛花的奔放",
   // 设置样式
   style: TextStyle(
      // 字体的大小
      fontSize: 22,
      // 字体的颜色
      color: Colors.green,
      // 设置下划线
      decoration: TextDecoration.overline,
      // 设置下划线的颜色
      decorationColor: Colors.red
      // 字体倾斜
      fontStyle: FontStyle.italic,
      // 字体加粗
      fontWeight: FontWeight.bold
   ),
   // 设置对齐方式
   textAlign: TextAlign.center,
   // 设置方向
   textDirection: TextDirection.rtl,
   // 设置缩放系数
   textScaleFactor: 1.0,
   // 最大行数
   maxLines: 2,
   // 超出显示 ...
   overflow: TextOverflow.ellipsis,
);

Text.rich(
   TextSpan(
      children: [
         TextSpan(text: "Hello World", style: TextStyle(color: Colors.green)),
         TextSpan(text: "Hello Flutter", style: TextStyle(color: Colors.brown)),
         WidgetSpan(child: Icon(Icons.favorite, color: Colors.red,)),
         TextSpan(text: "Hello 北京", style: TextStyle(color: Colors.black)),
      ]
   )
);

Icon(
   Icons.phone,
   color: Colors.green,
   size: 80,
);

IconButton(
   icon: Icon(Icons.volume_up, size: 48.0,),
   tooltip: '按下操作',
   onPressed: () {
      print("按下操作");
   },
);

RaisedButton(
  child: Text("RaisedButton"),
  textColor: Colors.red,
  color: Colors.brown,
  onPressed: () {
    print("RaisedButton Click");
  },
)

FlatButton(
   child: Text("FlatButton"),
   color: Colors.red,
   onPressed: () {
      print("FlatButton Click");
   },
)

TextButton(
   style: ButtonStyle(
     backgroundColor: MaterialStateProperty.all(Colors.brown), 
   ),
   onPressed: () {
     print("喜欢");
   },
   child: Row(
     mainAxisSize: MainAxisSize.min,
     children: [
       Text("喜欢"),
       Icon(Icons.favorite, color: Colors.red,)
     ],
   )
)

TextButton(
    style: ButtonStyle(
      //圆角
     shape: MaterialStateProperty.all(
         RoundedRectangleBorder(
             borderRadius:
                BorderRadius.circular(
                    18.67))),
     //边框
      side: MaterialStateProperty.all(
       BorderSide(
                          color: Colors.red,
            width: 0.67),
         ),
        //背景
         backgroundColor:
            MaterialStateProperty.all(
               Colors.transparent)),
      child: Text(
        '确定',
        style: TextStyle(
           fontWeight: FontWeight.bold,
           color: Colors.white,
         fontSize: 14),
        ),
       onPressed: () {}
)

OutlineButton(
   child: Text("OutlineButton"),
   color: Colors.red,
   onPressed: () {
      print("FlatButton Click");
   },
)

FloatingActionButton(
   child: Icon(Icons.add),
   onPressed: () {
      print("FloatingActionButton Click");
   },
)

FlatButton(
    color: Colors.amberAccent,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(6.0)
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Icon(Icons.favorite, color: Colors.red,),
        Text("喜欢你")
      ],
    ),
    onPressed: () {
      print("自定义FlatButton Click");
    },
  )

assets:
   - assets/images/juren.jpeg
   - assets/images/2.0x/
   - assets/images/3.0x/

AssetImage("assets/images/juren.jpeg")

const Image({
   ...
   this.width, //图片的宽
   this.height, //图片高度
   this.color, //图片的混合色值
   this.colorBlendMode, //混合模式
   this.fit,//缩放模式
   this.alignment = Alignment.center, //对齐方式
   this.repeat = ImageRepeat.noRepeat, //重复方式
    ...
})

final imageUrl = 'http://image.xcar.com.cn/attachments/a/day_200323/2020032314_59939b0716c40f9be872JrmcP75B4KfO.jpg-app';
Image(
   image: NetworkImage(imageUrl),
   width: 200,
   height: 200,
   // 宽度固定，高度自适应
   fit: BoxFit.fitHeight,
   // 范围 -1 到 1
   alignment: Alignment(0, 0),
);

加载完整路径的本地图片
import 'dart:io';
Image.file(File('/sdcard/Download.Stack.png')),
加载相对路径的本地图片，需要导入插件：path_provider
导入头文件使用
import 'dart:io'
import 'package:path_provider/path_provider.dart'
FutureBuilder(future: _getLocalFile("Download/stack.png")
builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
     return snapshot.data != null ? Image.file(snapshot.data) : Container();
}),
// 获取 SDCard的路径
Future<File> _getLocalFile(String filename) async {
    String dir (await getExternalStorageDirectory()).path;
    File f = File('$dir/$filename');
    return f;
}

FadeInImage.memoryNetwork(
      placeholder: kTansparentImage,
      image: '图片链接' 
)

FadeInImage.assetNetwork(
     placeholder: 'assets/图片地址',
     image: '图片链接' 
)

CachedNetworkImage(
      placeholder: CircularProgressIndicator(),
      imageUrl: '图片链接'        
)

const CircleAvatar({
   Key key,
   this.child, // 子Widget
   this.backgroundColor, // 背景颜色
   this.backgroundImage, // 背景图像
   this.foregroundColor, // 前景颜色
   this.radius, // 半径
   this.minRadius, // 最小半径
   this.maxRadius, // 最大半径
})

class HomeContent extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
      return Center(
        child: CircleAvatar(
           radius: 100,
           backgroundImage: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
           child: Container(
              alignment: Alignment(0, .5),
              width: 200,
              height: 200,
              child: Text("兵长利威尔")
           ),
       ),
    );
  }
}

Center(
   child: ClipOval(
      child: Image.network(
          imageUrl,
          width: 200,
          height: 200,
      ),
   )
);