Как установить выравнивание по правому краю в таблице с помощью Flutter
Я использую флаттер-стол. Я хочу, чтобы числа выровнялись по правому краю (или по центру)
Как я могу их найти?
Я хочу в центр заголовка. числа справа.
https://i.stack.imgur.com/HBiXj.png
Container(
margin: EdgeInsets.all(8.0),
width: double.infinity,
decoration: BoxDecoration(border: Border.all(width: 1.0)),
child: Table(
columnWidths: {
0: FlexColumnWidth(1),
1: FlexColumnWidth(1),
2: FlexColumnWidth(4),
3: FlexColumnWidth(1),
4: FlexColumnWidth(1),
5: FlexColumnWidth(1),
6: FlexColumnWidth(1),
},
border: TableBorder.all(),
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
children: <TableRow>[
TableRow(children: <Widget>[
Container(
padding: EdgeInsets.all(2.0),
child: Text('G',
style: TextStyle(fontWeight: FontWeight.bold)),
),
Container(
padding: EdgeInsets.all(2.0),
child: Text('A',
style: TextStyle(fontWeight: FontWeight.bold)),
),
]
),
TableRow(children: <Widget>[
Container(
padding: EdgeInsets.all(2.0),
child: Text('2'),
),
Container(
padding: EdgeInsets.all(2.0),
child: Text('FW'),
),
]
)
Слишком много кода, тогда я написал несколько кодов. Пожалуйста, взгляните.
5 ответов
Решение
Есть alignment: Alignment.center внутри Container,
Container(
alignment: Alignment.center,
padding: EdgeInsets.all(2.0),
child: Text('G',
style: TextStyle(fontWeight: FontWeight.bold)),
),
Это пример и часть вашего кода! Таблица дети:
children: <TableRow>[
TableRow(
children: <Widget>[
Container(
padding: EdgeInsets.all(2.0),
child: Text('G',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign:TextAlign.center),
),
Container(
padding: EdgeInsets.all(2.0),
child: Text('A',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign:TextAlign.center),
),
Container(
padding: EdgeInsets.all(2.0),
child: Text('P',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign:TextAlign.center),
),
Container(
padding: EdgeInsets.all(2.0),
child: Text('P',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign:TextAlign.center),
),
]),
TableRow(
children: <Widget>[
Container(
padding: EdgeInsets.all(2.0),
child: Text('1',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign:TextAlign.end),
),
Container(
padding: EdgeInsets.all(2.0),
child: Text('2',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign:TextAlign.end),
),
Container(
padding: EdgeInsets.all(2.0),
child: Text('3',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign:TextAlign.end),
),
Container(
padding: EdgeInsets.all(2.0),
child: Text('4',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign:TextAlign.end),
),
]),
TableRow(
children: <Widget>[
Container(
padding: EdgeInsets.all(2.0),
child: Text('1',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign:TextAlign.end),
),
Container(
padding: EdgeInsets.all(2.0),
child: Text('2',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign:TextAlign.end),
),
Container(
padding: EdgeInsets.all(2.0),
child: Text('3',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign:TextAlign.end),
),
Container(
padding: EdgeInsets.all(2.0),
child: Text('4',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign:TextAlign.end),
),
]),
])
Таблица Flutter с минимальными функциями, такими как отступы, выравнивание текста, альтернативные цвета строк
@override
Widget build(BuildContext context) {[enter image description here][1]
return Scaffold(
appBar: AppBar(
title: Text("Farmers Bills"),
backgroundColor: Colors.blue,
),
body: SafeArea(
child: Scrollbar(
child: ListView(children: <Widget>[
Table(
columnWidths: {
0: FractionColumnWidth(.3),
1: FractionColumnWidth(.3),
2: FractionColumnWidth(.3)
},
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
border: TableBorder.all(width: 1.0, color: Colors.grey),
children: renderTableRows(listOfBills),
),
]),
)));
}
renderTableRows(listOfBills) {
List<TableRow> rows = new List<TableRow>();
rows.add(TableRow(children: [
Column(children: [
Container(
decoration: BoxDecoration(color: Colors.blue),
padding: EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
alignment: Alignment.center,
child: Text("Bill Date",
style: TextStyle(
fontSize: 21,
fontWeight: FontWeight.bold,
color: Colors.white,
)))
]),
Column(children: [
Container(
decoration: BoxDecoration(color: Colors.blue),
padding: EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
alignment: Alignment.center,
child: Text("Bill No",
style: TextStyle(
fontSize: 21,
fontWeight: FontWeight.bold,
color: Colors.white,
)))
]),
Column(children: [
Container(
decoration: BoxDecoration(color: Colors.blue),
padding: EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
alignment: Alignment.center,
child: Text("Amount",
style: TextStyle(
fontSize: 21,
fontWeight: FontWeight.bold,
color: Colors.white,
)))
]),
// you can have more properties of course
]));
int count = 2;
Color bgColor;
listOfBills.forEach((item) => {
bgColor = (count % 2 == 0) ? Colors.white : Color.fromRGBO(204,229,255, 1.0),
count++,
rows.add(TableRow(children: [
Column(children: [
Container(
decoration: BoxDecoration(color: bgColor),
padding: EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
alignment: Alignment.centerLeft,
child: Text(item['billdate'],
style: TextStyle(
fontSize: 18,
)))
]),
Column(children: [
Container(
decoration: BoxDecoration(color: bgColor),
padding: EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
alignment: Alignment.centerLeft,
child: Text(item['billno'],
style: TextStyle(
fontSize: 18,
)))
]),
Column(children: [
Container(
decoration: BoxDecoration(color: bgColor),
padding: EdgeInsets.fromLTRB(6.0, 0.0, 0.0, 0.0),
alignment: Alignment.centerLeft,
child: Text(item['amount'],
style: TextStyle(
fontSize: 18,
)))
]),
// you can have more properties of course
]))
});
return rows;`enter code here`
}
Попробуй это:
Container(
padding: EdgeInsets.all(2.0),
child: Align(
alignment: Alignment.center,
Text('G',
style: TextStyle(fontWeight: FontWeight.bold)),
),
),