Flutter-带有FittedBox的FlatButton内的文本不可见

如何解决Flutter-带有FittedBox的FlatButton内的文本不可见

我正在学习颤动，并试图设计一个由带有FlatButtons的单元格组成的表，用于执行某些操作。当我尝试使用FlatButton创建TableCell时，FlatButton文本垂直呈现，并且当我使用FittedBox将其水平对齐时，FlatButton文本消失了，这可能是哪里出了问题，并且有什么解决方法吗？请在下面找到代码段

Widget build(BuildContext context) {
    final deviceSize = MediaQuery.of(context).size;
    return Stack(
      children: [
        Container(
          height: deviceSize.height,width: deviceSize.width,decoration: const BoxDecoration(
            gradient: LinearGradient(colors: [
              Color(0xffee0979),Color(0xffff6a00),//Color(0xff29ffc6),],begin: Alignment.bottomRight),),Container(
          margin: EdgeInsets.only(bottom: 200),child: Center(
            child: Card(
              margin: EdgeInsets.all(12),shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),elevation: 15,child: Container(
                alignment: Alignment.topRight,height: deviceSize.height * 0.70,width: double.infinity,padding: EdgeInsets.all(12.0),child: Table(
                  border: TableBorder.all(width: 1.2),children: [
                    for (var i = 0; i < 15; i++)
                      TableRow(
                        children: [
                          for (var j = 0; j < 15; j++)
                            TableCell(
                                verticalAlignment:
                                    TableCellVerticalAlignment.middle,child: FlatButton(
                                  onPressed: () {},child: FittedBox(child: Text('Test')),)),Container(
          alignment: Alignment.bottomCenter,margin: EdgeInsets.only(bottom: 60),child: RaisedButton(
            onPressed: () {},elevation: 10,textColor: Colors.white,shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),color: Theme.of(context).primaryColor,child: Container(
              width: 100,child: Row(
                mainAxisAlignment: MainAxisAlignment.center,children: [
                  Icon(Icons.assignment),SizedBox(
                    width: 10,Text('Instructions')
                ],);
  }
}

提前感谢您的宝贵时间！

解决方法

问题不是单元格内的文本对齐或对齐。这是因为您连续输入的列数很多，无法在屏幕上正常显示。

您可以做的是减少列数：

TableRow(
                    children: [
                      for (var j = 0; j < 5; j++)
                        TableCell(
                            verticalAlignment:
                                TableCellVerticalAlignment.middle,child: FlatButton(
                              onPressed: () {},child: Text('Test'),)),],),

如果您想连续容纳15列而没有scrollview。使用SizedBox：

TableRow(
                      children: [
                        for (var j = 0; j < 5; j++)
                          SizedBox(
                            width: 50,child: TableCell(
                              verticalAlignment:
                                  TableCellVerticalAlignment.middle,child: FittedBox(
                                  child: FlatButton(
                                onPressed: null,

或者将表放入带有scrollDirection的SingleChildScrollView内，使其像这样水平放置：

SingleChildScrollView(
              scrollDirection: Axis.horizontal,child: Table(
                columnWidths: {
                  0: IntrinsicColumnWidth(),1: IntrinsicColumnWidth(),2: IntrinsicColumnWidth(),3: IntrinsicColumnWidth(),4: IntrinsicColumnWidth(),},border: TableBorder.all(width: 1.2),children: [
                  for (var i = 0; i < 15; i++)
                    TableRow(
                      children: [
                        for (var j = 0; j < 5; j++)
                          TableCell(
                              verticalAlignment:
                                  TableCellVerticalAlignment.middle,child: FlatButton(
                                onPressed: null,

希望有帮助！

,

在FittedBox内添加一个容器来容纳子文本可能会达到目的。