效果圖
TryEnough
代碼
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
import 'package:flutter/material.dart';
void main() {
// debugPaintSizeEnabled = true;
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
//關(guān)鍵代碼
var stack = new Stack(
alignment: const Alignment(0.0, 0.6), //分析 2
children: [
new CircleAvatar( //分析 3
backgroundImage: new AssetImage('images/lake.jpg'),
radius: 100.0,
),
new Container( //分析 4
decoration: new BoxDecoration(
color: Colors.black45,
),
child: new Text(
'添加水印',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
elevation: 5.0,
),
body: Center( //分析 1
child: stack,
),
);
}
}
分析
- 在屏幕中央添加一個(gè)stack
- Stack中第一個(gè)widget為底部的內(nèi)容夺鲜，第二個(gè)為蓋在上面的widget玲销。所以這里的圓形圖片CircleAvatar是底部啡捶，第二個(gè)Container為蓋在上面的文字晚碾。那么分析2這里的alignment就是調(diào)整第二個(gè)widget位置的屬性。Alignment將第一個(gè)widget的中心當(dāng)作（0雨席，0）坐標(biāo)征唬。所以這里的（0.0捌显，0.6）就是如圖的位置。
- CircleAvatar是畫圓形圖的widget总寒，當(dāng)使用圖時(shí)扶歪，應(yīng)該指定backgroundImage屬性，同時(shí)可以設(shè)置半徑摄闸。
- 這個(gè)代表蓋在底部圖片上的文字
