Question

我需要使用Flutter创建全屏表格。由于我无法使用Table / DataTable进行此操作，因此我尝试使用Flex / Expanded。

一切正常，但是我无法设置Expanded的{{1}}的样式，因此例如看来我无法设置填充。

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

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 ) ); } }内设置child的样式？

Answer 1

这是如何在Flutter中使用Expanded小部件进行填充

    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

您的CalendarCell没有垂直填充。在CalendarRow中，您使用的是Expanded，因此所有行都在屏幕上展开。改用Flexible

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
        )
    );
  }
}

展开后内部填充

2 个答案: