在下文中，藍色容器出現在縮放的琥珀色容器內。我怎樣才能將藍色容器定位在按比例的琥珀色容器的正下方，而不添加任何間距（例如使用SizedBox）或重新定位第二個部件？
import 'package:flutter/material.dart'/span>。
void main() {
runApp(MyApp())。
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
主題。ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.white)。
debugShowCheckedModeBanner。false。
家。Scaffold(
body: Column(
兒童。[
Transform.scale(
對齊。const Alignment(-1, -1) 。
規模。2,
孩子。Container(width: 100, height: 100, color: Colors.mber)）。)
Container(width: 50, height: 50, color: Colors.blue)
],
),
),
);
}
}
在顯示第二個widget時，似乎沒有考慮到被縮放的widget的大小。
uj5u.com熱心網友回復：
試試下面的代碼，希望對你有幫助：
Column(
兒童。[
容器(
width: 100,
高度。100,
color: Colors.mber,
),
容器(
對齊。Alignment.center,
width: 50,
高度。50。
color: Colors.blue,
),
],
),
你的結果螢屏 -> 
uj5u.com熱心網友回復：
當使用Transform.scale時，我們正在改變一個widget的比例，從它當前的變換。
黑色矩形代表列-邊界
Transform.scale(
規模。2,
孩子。Container(width: 100, height: 100, color: Colors.mber),
),
隨著你的增加，scale:2意味著它將從目前的位置上擴展2倍。
你可以閱讀
具有scale:2的影像，黑色的邊框代表原始比例（1x）。
如果不呼叫alignment屬性，它將處于中心位置。
在應用alignment屬性時，它將處于居中位置。
在應用alignment: const Alignment(-1, -1)時，我們將它放在左上角對齊。你可以查看一下
現在讓我們添加另一個容器。
Column(
mainAxisSize: MainAxisSize.min,
children: [
Transform.scale(
對齊。const Alignment(-1, -1) 。
規模。2,
孩子。容器(
width: 100, height: 100, color: Colors.mber.withOpacity(.3))。
),
容器(
width: 50,
高度。50,
color: Colors.blue.withOpacity(.3)。
)
],
),
我們知道，黑色代表列的邊界，意味著我們的第一個Transform.scale因為使用了scale屬性而被畫在列之外。
解決方案
你可以添加
SizedBox(
高度。100 * scale * .5,
),
因為我們的實際容器高度為100，乘以有一半的比例。對于比例2，它將是height: 100 * 2 * .5,.
或者你可以在第二個容器上留出空白，就像
一樣 Container(
margin: EdgeInsets.only(top: 100 * 2 * .5）。)
寬度：50。
高度。50。
color: Colors.blue.withOpacity(.3)。
)
或者你可以在Transform.scale容器上添加底邊距，就像
margin: EdgeInsets.only(bottom: 100 * 2 * .5),/code>
Widget到文本
。
class TTSW extends StatefulWidget{
TTSW({Key? key}) : super(key: key);
@override
_TTSWState createState() => _TTSWState()。
}
class _TTSWState extends State< TTSW> {
@override
Widget build(BuildContext context) {
return Center(
孩子。容器(
width: 100,
//高度: 100 100,
裝飾。
BoxDecoration(border: border.all(width: 2, color: Colors.black))。
孩子。列(
mainAxisSize: MainAxisSize.min,
兒童。[
Transform.scale(
對齊。const Alignment(-1, -1) 。
規模。2,
孩子。容器(
// margin: EdgeInsets.only(bottom: 100 * 2 * .5),
寬度：100。
高度。100。
color: Colors.mber.withOpacity(.3))。
),
大小盒(SizedBox)
高度。100 * 2 * .5,
),
容器(
// margin: EdgeInsets.only(top: 100 * 2 * .5),
width: 50,
高度。50。
color: Colors.blue.withOpacity(.93)。
)
],
),
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/309252.html
標籤：