在 a中，當最右邊的內部小部件比最左邊的內部小部件具有更多專案時Row，我如何確保其中Text帶有“Hello”的完全居中而不是向左一點？RowRow
請注意，在螢屏截圖中，“Hello”略微偏向左側。
我嘗試使用 a Stack，但如果文本長于可用空間，那似乎效果不佳，因為它會導致文本與側面彩色小部件重疊。
我正在使用以下代碼：
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
width: 45,
height: 45,
color: Colors.red,
),
],
),
Text(
"Hello",
textAlign: TextAlign.center,
),
Row(
children: [
Container(
width: 45,
height: 45,
color: Colors.purple,
),
Container(
width: 45,
height: 45,
color: Colors.green,
),
],
)
],
),
)
uj5u.com熱心網友回復：
我寫了一個可能適合你的情況的特定代碼，首先是結果：
基本上，它的想法是獲取角落兩行的寬度，然后搜索max它們之間的寬度，然后將Text()寬度設定為螢屏寬度大小，減去最大值乘以二，這樣可以確保它正好在中心而不與小部件重疊：
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:get/get.dart';
import 'controllers/controller.dart';
import 'dart:math' as math;
double firstRowWidth = 0;
double secondRowWidth = 0;
double max = 0;
class TestPage extends StatefulWidget {
TestPage({super.key});
@override
State<TestPage> createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
final testController = Get.put(TestController());
@override
void initState() {
SchedulerBinding.instance.addPersistentFrameCallback((timeStamp) {
SchedulerBinding.instance.addPostFrameCallback((_) {
setState(() {
max = math.max(secondRowWidth, firstRowWidth);
});
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
alignment: Alignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
row2(),
row1(),
],
),
Positioned(
width: MediaQuery.of(context).size.width - (max * 2),
child: Text(
"Hello" * 20,
textAlign: TextAlign.center,
),
),
],
),
),
);
}
}
class row1 extends StatelessWidget {
const row1({super.key});
@override
Widget build(BuildContext context) {
SchedulerBinding.instance.addPostFrameCallback((_) {
firstRowWidth = context.size!.width;
});
return Row(
children: [
Container(
width: 45,
height: 45,
color: Colors.purple,
),
Container(
width: 45,
height: 45,
color: Colors.green,
),
],
);
}
}
class row2 extends StatelessWidget {
const row2({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
SchedulerBinding.instance.addPostFrameCallback((_) {
secondRowWidth = context.size!.width;
});
return Row(
children: [
Container(
width: 45,
height: 45,
color: Colors.red,
),
],
);
}
}
希望這可以幫助 ！
uj5u.com熱心網友回復：
如果您沒有其他小部件寬度，您可以使用stack小部件：
Stack(
alignment: Alignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
width: 45,
height: 45,
color: Colors.red,
),
],
),
Row(
children: [
Container(
width: 45,
height: 45,
color: Colors.purple,
),
Container(
width: 45,
height: 45,
color: Colors.green,
),
],
)
],
),
Text(
"Hello",
textAlign: TextAlign.center,
),
],
),
如果您的文字很長，我建議@OMiShah 回答并用expanded小部件包裝您的文字。
uj5u.com熱心網友回復：
用 widget包裝Rows 和Textwidget（第一個Rowwidget的子級），并將右邊的Expanded設定為。mainAxisAlignmnetRowMainAxisAlignment.end
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Row(
children: [
Container(
width: 45,
height: 45,
color: Colors.red,
),
],
),
),
const Expanded(
child: Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
textAlign: TextAlign.center,
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
width: 45,
height: 45,
color: Colors.purple,
),
Container(
width: 45,
height: 45,
color: Colors.green,
),
],
),
),
],
),
)
輸出：
如果任何一方都有更多的小部件，那么您可以使用Wrap小部件而不是內部Row小部件，這會將溢位的專案包裝到下一行。
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Wrap(
children: [
Container(
width: 45,
height: 45,
color: Colors.red,
),
],
),
),
const Expanded(
child: Text(
"Ex qui tempor dolore ex aliquip ex consectetur proident excepteur eu. Velit non sint laboris sit. Ut minim proident irure non ullamco deserunt qui. Quis eu tempor consequat amet irure consequat irure elit. Culpa id in laboris reprehenderit veniam voluptate tempor minim eu reprehenderit sit.",
textAlign: TextAlign.center,
),
),
Expanded(
child: Wrap(
alignment: WrapAlignment.end,
children: [
Container(
width: 45,
height: 45,
color: Colors.purple,
),
Container(
width: 45,
height: 45,
color: Colors.green,
),
Container(
width: 45,
height: 45,
color: Colors.orange,
),
Container(
width: 45,
height: 45,
color: Colors.red,
),
],
),
),
],
),
)
輸出：
uj5u.com熱心網友回復：
嘗試以下操作，我是用Stack小部件制作的：
Center(
child: Stack(
alignment: Alignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
width: 45,
height: 45,
color: Colors.red,
),
],
),
Row(
children: [
Container(
width: 45,
height: 45,
color: Colors.purple,
),
Container(
width: 45,
height: 45,
color: Colors.green,
),
],
)
],
),
Text(
"Hello",
textAlign: TextAlign.center,
),
],
),
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/537207.html
標籤：扑镖颤振布局
上一篇：顫振倒計時不倒計時