内部填充 展开

Question

我需要使用 Flutter 创建一个全屏表。由于我无法使用Table/DataTable这样做，因此我正在尝试使用Flex/Expanded.

一切都按预期工作，但我无法Expanded的child设置样式，因此例如，似乎我无法设置填充。

这是我到目前为止的代码。

main.dart：

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: Calendar2(),
);
}
}

calendar2.dart：

import 'package:flutter/material.dart';
class Calendar2 extends StatefulWidget {
@override
State<StatefulWidget> createState() => _Calendar2State();
}
class _Calendar2State extends State<Calendar2> {
@override
Widget build(BuildContext context) {
List<CalendarRow> tableRows = buildTable();
print(tableRows);
return Scaffold(
body: Flex(
direction: Axis.vertical,
children: tableRows,
)
);
}
List<CalendarRow> buildTable() {
List<CalendarRow> rows = <CalendarRow>[];
for(int i=0; i<4; i++) {
List<Widget> children = [];
for(int j=0; j<7; j++) {
children.add(
CalendarCell(
child: Text((i * 7 + j + 1).toString())
)
);
}
rows.add(
CalendarRow(
children: children
)
);
}
return rows;
}
}
class CalendarCell extends StatelessWidget {
Widget child;
CalendarCell({this.child}) {}
@override
Widget build(BuildContext context) {
return Expanded (
flex: 1,
child: Padding(
child: child,
padding: EdgeInsets.all(0.0), // this doesn't work for top and bottom
)
);
}
}
class CalendarRow extends StatelessWidget {
List<Widget> children = <Widget>[];
CalendarRow({this.children}) {}
@override
Widget build(BuildContext context) {
return Expanded(
flex: 1,
child: Flex(
direction: Axis.horizontal,
children: children
)
);
}
}

如何在Expanded内设置child样式？

Answer 1

这就是在颤振中使用扩展小部件完成填充的方式

class DicePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Image.asset('images/dice1.png'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Image.asset('images/dice1.png'),
),
),
],
),
);

Answer 2

您的日历单元格没有垂直填充。 在"日历行"中，您使用的是"展开"，因此所有行都通过屏幕展开。改用灵活

class Calendar2 extends StatefulWidget {
@override
State<StatefulWidget> createState() => _Calendar2State();
}
class _Calendar2State extends State<Calendar2> {
@override
Widget build(BuildContext context) {
List<CalendarRow> tableRows = buildTable();
print(tableRows);
return Scaffold(
body: Flex(
mainAxisAlignment: MainAxisAlignment.center,
direction: Axis.vertical,
children: tableRows,
)
);
}
List<CalendarRow> buildTable() {
List<CalendarRow> rows = <CalendarRow>[];
for(int i=0; i<4; i++) {
List<Widget> children = [];
for(int j=0; j<7; j++) {
children.add(
CalendarCell(
child: Text((i * 7 + j + 1).toString())
)
);
}
rows.add(
CalendarRow(
children: children
)
);
}
return rows;
}
}
class CalendarCell extends StatelessWidget {
final Widget child;
CalendarCell({this.child});
@override
Widget build(BuildContext context) {
return Expanded (
flex: 1,
child: Padding(
child: child,
padding: EdgeInsets.all(0.0), // this doesn't work for top and bottom
)
);
}
}
class CalendarRow extends StatelessWidget {
final List<Widget> children;
CalendarRow({this.children = const <Widget>[]});
@override
Widget build(BuildContext context) {
return Flexible(
child: Flex(
direction: Axis.horizontal,
children: children
)
);
}
}