Android 颤振-文本在带有FittedBox的FlatButton内不可见
我正在学习颤振,并试图设计一个由带有扁平按钮的单元格组成的表格,用于执行某些操作。当我尝试使用FlatButton创建TableCell时,FlatButton文本将垂直渲染,当我使用FittedBox将其水平对齐时,FlatButton文本将消失,这里可能会出现什么问题?是否有解决方法?请在下面找到代码片段Android 颤振-文本在带有FittedBox的FlatButton内不可见,android,ios,flutter,flutter-layout,Android,Ios,Flutter,Flutter Layout,我正在学习颤振,并试图设计一个由带有扁平按钮的单元格组成的表格,用于执行某些操作。当我尝试使用FlatButton创建TableCell时,FlatButton文本将垂直渲染,当我使用FittedBox将其水平对齐时,FlatButton文本将消失,这里可能会出现什么问题?是否有解决方法?请在下面找到代码片段 Widget build(BuildContext context) { final deviceSize = MediaQuery.of(context).size; r
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')
],
),
),
),
),
],
);
}
}
小部件构建(构建上下文){
final deviceSize=MediaQuery.of(context).size;
返回堆栈(
儿童:[
容器(
高度:deviceSize.height,
宽度:deviceSize.width,
装饰:康斯特盒子装饰(
渐变:线性渐变(颜色:[
颜色(0xffee0979),
颜色(0xffff6a00),
//颜色(0xff29ffc6),
],开始:对齐。右下角),
),
),
容器(
页边距:仅限边缘集(底部:200),
儿童:中心(
孩子:卡片(
保证金:所有(12),
形状:圆形矩形边框(
边界半径:边界半径。圆形(15.0),
),
标高:15,
子:容器(
对齐:alignment.topRight,
高度:deviceSize.height*0.70,
宽度:double.infinity,
填充:所有边缘设置(12.0),
孩子:桌子(
边框:表格边框。全部(宽度:1.2),
儿童:[
对于(变量i=0;i<15;i++)
桌椅(
儿童:[
对于(var j=0;j<15;j++)
表细胞(
垂直排列:
TableCell垂直对齐。中间,
孩子:扁平按钮(
按下:(){},
子项:FittedBox(子项:文本('Test')),
)),
],
),
],
),
),
),
),
),
容器(
对齐:对齐.bottomCenter,
页边距:仅限边缘组(底部:60),
孩子:升起按钮(
按下:(){},
标高:10,
textColor:Colors.white,
形状:
RoundedRectangleBorder(borderRadius:borderRadius.circular(12)),
颜色:主题。背景。原色,
子:容器(
宽度:100,
孩子:排(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
图标(图标分配),
大小盒子(
宽度:10,
),
文本(“说明”)
],
),
),
),
),
],
);
}
}
提前感谢您宝贵的时间 在FittedBox中添加一个容器来保存子文本可能会起到作用。问题不在于对齐或在单元格中调整文本。这是因为您在一行中输入的列的数量要在屏幕上正常显示很多 您可以做的是减少列数:
TableRow(
children: [
for (var j = 0; j < 5; j++)
TableCell(
verticalAlignment:
TableCellVerticalAlignment.middle,
child: FlatButton(
onPressed: () {},
child: Text('Test'),
)),
],
),
TableRow(
儿童:[
对于(var j=0;j<5;j++)
表细胞(
垂直排列:
TableCell垂直对齐。中间,
孩子:扁平按钮(
按下:(){},
子项:文本('Test'),
)),
],
),
如果要在一行中容纳15列而不使用scrollview。使用一个大小合适的框:
TableRow(
children: [
for (var j = 0; j < 5; j++)
SizedBox(
width: 50,
child: TableCell(
verticalAlignment:
TableCellVerticalAlignment.middle,
child: FittedBox(
child: FlatButton(
onPressed: null,
child: Text('Test'),
)),
),
),
],
),
TableRow(
儿童:[
对于(var j=0;j<5;j++)
大小盒子(
宽度:50,
儿童:表细胞(
垂直排列:
TableCell垂直对齐。中间,
孩子:FittedBox(
孩子:扁平按钮(
onPressed:null,
子项:文本('Test'),
)),
),
),
],
),
或者将表格放在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,
child: Text('Test'),
)),
],
),
],
),
),
SingleChildScrollView(
滚动方向:轴水平,
孩子:桌子(
列宽:{
0:IntrinsicColumnWidth(),
1:IntrinsicColumnWidth(),
2:IntrinsicColumnWidth(),
3:IntrinsicColumnWidth(),
4:IntrinsicColumnWidth(),
},
边框:表格边框。全部(宽度:1.2),
儿童:[
对于(变量i=0;i<15;i++)
桌椅(
儿童:[
对于(var j=0;j<5;j++)
表细胞(
垂直排列:
TableCell垂直对齐。中间,
孩子:扁平按钮(
onPressed:null,
子项:文本('Test'),
)),
],
),
],
),
),
希望这有帮助 谢谢!减少行数和列数