Не получается позиционировать виджеты
Есть два файла. Первый:
// main.dart
import 'package:flutter/material.dart';
import 'colRow.dart';
void main() => runApp(App06Main());
class App06Main extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: _MyHomePage(),
);
}
}
class _MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
color: Colors.grey[400],
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20.0,
),
child: buildColumn(context),
),
);
}
}
Widget buildTitleText() {
return Text(
"My Pet Shop",
textScaleFactor: 3.0,
textAlign: TextAlign.center,
);
}
Widget buildRoundedBox(
String label, {
double height = 88.0,
}) {
return Container(
height: height,
width: 88.0,
alignment: Alignment(0.0, 0.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
child: Text(
label,
textAlign: TextAlign.center,
),
);
}
Второй: // colRow.dart
import 'package:flutter/material.dart';
import 'main.dart';
Widget buildColumn(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
buildTitleText(),
SizedBox(height: 20.0),
_buildColumnWithinRow(),
],
);
}
Widget _buildColumnWithinRow() {
return Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
buildRoundedBox("Cat"),
SizedBox(width: 20.0),
buildRoundedBox("Dog"),
SizedBox(width: 20.0),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
buildRoundedBox(
"Big ox",
height: 30.0,
),
buildRoundedBox(
"Small ox",
height: 20.0,
),
],
),
],
);
}
Вопрос такой. В коде colRow.dart в виджете _buildColumnWithinRow никак не получается установить виджеты с текстами "Big ox" и "Small ox" (они находятся в Column) в spaceBetween. При подстановке в MainAxisAlignment .spaceBetween или .spaceAround или .end или других, эти два виджета позиционируются все время в центре. Не могу понять, почему?
Ответы (1 шт):
Автор решения: MiT
→ Ссылка
Не могу понять, почему?
Потому что его сжимает Column выше. Expanded сделает так, чтобы Row занял всю доступную высоту.
Widget _buildColumnWithinRow() {
return Expanded(
child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
buildRoundedBox("Cat"),
SizedBox(width: 20.0),
buildRoundedBox("Dog"),
SizedBox(width: 20.0),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
buildRoundedBox(
"Big ox",
height: 30.0,
),
buildRoundedBox(
"Small ox",
height: 20.0,
),
],
),
],
),
);
}