flutter-佈局(Stack:層疊佈局)
阿新 • • 發佈:2020-07-02
在頭像上方再放入一個容器,容器裡邊寫上字,這時候我們就可以使用Stack佈局。
import 'package:flutter/material.dart'; void main ()=>runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ //層疊 var stack=Stack( // 對齊 第一位x軸 第二位Y軸 適合2個元件定位 alignment: const FractionalOffset(0.5, 0.2), children:<Widget>[ CircleAvatar( backgroundImage: new AssetImage('images/2222.png'), radius: 100.0, ), Container( decoration: BoxDecoration( color: Colors.lightBlue[200], ), padding: const EdgeInsets.all(5.0), child: Text('JSPang'), ) ], ); return MaterialApp( title:"layout", home:Scaffold( appBar: AppBar( title:Text('層疊佈局Stack') ), body: Center(child: stack,) ) ); } }
Stack的Positioned屬性
import 'package:flutter/material.dart'; voidmain ()=>runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ //層疊 var stack=Stack( // 對齊 第一位x軸 第二位Y軸 alignment: const FractionalOffset(0.5, 0.2), children: <Widget>[ CircleAvatar( backgroundImage: new AssetImage('images/2222.png'), radius: 100.0, ), Positioned( top: 10.0, left: 10.0, child: Text('wwww.baidu.com'), ), Positioned( bottom: 10.0, right: 10.0, child: Text('www.google.com'), ) ], ); return MaterialApp( title:"layout", home:Scaffold( appBar: AppBar( title:Text('層疊佈局Stack') ), body: Center(child: stack,) ) ); } }