我有一些问题与颤振对齐小部件

Question

我尝试将子元素与bottomCenter对齐。子部件位于屏幕的中间，而不是底部。

Align(
alignment: Alignment.bottomCenter,
child: Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
child: Text('Player 1:'),
),
),

这个align小部件在列中，所以可能是列高度错误。当我添加expand时，我得到了一个错误:

抛出另一个异常:RenderBox was not laid out: RenderFlex#64524 relayoutBoundary=up1 NEEDS-PAINT
needs - composition - bits - update

所有的代码在这里:

import 'package:flutter/material.dart';
import 'dart:math';
void main() {
runApp(
const HomeScreen(),
);
}
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Dice'),
centerTitle: true,
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Dice(),
],
)));
}
}
class Dice extends StatefulWidget {
const Dice({Key? key}) : super(key: key);
@override
State<Dice> createState() => _DiceState();
}
class _DiceState extends State<Dice> {
List dices = [
5,
5,
5,
5,
5,
];
List showingdices = [
5,
5,
5,
5,
5,
];
var pointcount = 0;
int setnum = 0;
rolldices() {
for (int i = 0; i < dices.length; i++) {
if (dices[i] != 0) {
setState(() {
setnum = Random().nextInt(6) + 1;
dices[i] = setnum;
showingdices[i] = setnum;
});
}
}
points();
}
int pointer = 0;
points() {
int stopper = 0;
var map = {};
for (var element in dices) {
if (!map.containsKey(element)) {
map[element] = 1;
} else {
map[element] += 1;
if (map[element] == 3) {
if (element == 1) {
pointer = element * 1000;
} else {
pointer = element * 100;
}
for (var thing in dices) {
if (thing == element && stopper < 3) {
stopper += 1;
dices[dices.indexOf(element)] = 0;
}
}
}
}
}
for (var element in dices) {
if (element == 1) {
pointer += 100;
setState(() {
dices[dices.indexOf(element)] = 0;
});
}
if (element == 5) {
pointer += 50;
setState(() {
dices[dices.indexOf(element)] = 0;
});
}
}
setState(() {
pointcount += pointer;
});
}
Reset() {
setState(() {
dices = [
5,
5,
5,
5,
5,
];
pointcount = 0;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
pointcount.toString(),
style: const TextStyle(fontSize: 20),
),
Row(
children: [
Expanded(
child: Container(
margin: const EdgeInsets.all(15),
child: Image.asset(
'images/' + showingdices[0].toString() + '.png'))),
Expanded(
child: Container(
margin: const EdgeInsets.all(15),
child: Image.asset(
'images/' + showingdices[1].toString() + '.png'))),
Expanded(
child: Container(
margin: const EdgeInsets.all(15),
child: Image.asset(
'images/' + showingdices[2].toString() + '.png'))),
Expanded(
child: Container(
margin: const EdgeInsets.all(15),
child: Image.asset(
'images/' + showingdices[3].toString() + '.png'))),
Expanded(
child: Container(
margin: const EdgeInsets.all(15),
child: Image.asset(
'images/' + showingdices[4].toString() + '.png')))
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: rolldices, child: const Text('Roll The Dice!🎲')),
ElevatedButton(onPressed: Reset, child: const Text('Reset')),
],
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
child: Text('Player 1:'), //Your widget here,
),
),
),
],
);
}
}

Answer 1

如果您使用的是Column小部件，则其默认的主轴对齐方式是居中。如果您希望将其放置在底部中心，请尝试在列内添加分隔符，这将占用所有可用空间。确保列的边界为

Sizedbox(
height: MediaQuery.of(context).size.height,
width : MediaQuery.of(context).size.width,
child: Column(
children: [
//Other widgets here
Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('player1'),
]
)
)
]
)
)