内边距展开答案

【问题标题】：Padding inside Expanded内边距展开
【发布时间】：2020-04-05 03:24:52
【问题描述】：

我需要使用 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 的样式？

【问题讨论】：

为什么要扩展Expanded？制作一个 statelessWidget 并改用组合
@RémiRousselet 因为Expanded 已经具有我正在寻找的功能（扩展宽度/高度）。
我不认为你明白。这是一个pastebin pastebin.com/Dy78nzQV
@RémiRousselet 好的，我知道了，但这里有什么好处？树中只多了一个元素，这是无用的（创建布局时不要写StatelessWidgets，而是创建特定的组件，如Extended）。
扩展小部件是不好的做法。 StatelessWidget 就是为此目的而存在的。这种语法有太多缺点，我无法在 cmets 中合理地解释它。但常见问题解答在该主题上非常清楚：使用组合而不是继承flutter.io/faq 请参阅“我可以扩展和自定义捆绑的小部件吗？”

标签： android flutter padding

【解决方案1】：

这是在颤振中使用 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'),
        ),
      ),
    ],
  ),
);

【讨论】：

【解决方案2】：

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

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

【讨论】：