我正在尝试创建一个包含提升按钮的网格。每个按钮下面都有一个图标和文本。文本长度各不相同。当文本太长时，部分单词会换行，而不是调整为较小的尺寸。当我用Flexible或Expandable包裹它时，它不会改变。
当我使用更大的屏幕尺寸时，按钮的内容不会放大。 大屏幕
如果我使用 maxLines:2，它会给我这个： 最大行数
完整代码：
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
import 'package:pocket_nephrology/hypona_correction.dart';
import 'package:pocket_nephrology/water_deficit.dart';
import 'package:pocket_nephrology/ufperweight.dart';
import 'package:pocket_nephrology/osmolargap.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'abg_analyzer.dart';
void main() {
runApp(const MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp()));
}
const snackBar = SnackBar(
content: Text('Developed by Ratib Mahfouz M.D.'),
);
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
colors: [
Color(0xFF550024),
Color(0xFF870d4c),
Color(0xFFbb4678),
]
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 20,),
Align(
alignment: Alignment.topRight,
child: IconButton(
icon: const Icon(Icons.info_outlined, size: 30, color: Colors.white),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
),
),
const SizedBox(height: 30,),
const Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Pocket Nephrology", style: TextStyle(color: Colors.white, fontSize: 40, fontWeight: FontWeight.bold,),),
SizedBox(height: 10,),
Text("The ultimate Nephrology tool", style: TextStyle(color: Colors.white, fontFamily: "RobotoMono", fontSize: 18),),
],
),
),
const SizedBox(height: 20),
Expanded(
child: Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(60), topRight: Radius.circular(60))
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: GridView.count(crossAxisCount: 3,
scrollDirection: Axis.vertical,
mainAxisSpacing: 16,
crossAxisSpacing: 16,
primary: false,
children: <Widget>[
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => const hypona_correction()));
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: Icon(Icons.science,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('HypoNa \nCorrection',
maxLines: 2,
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => const Water_Deficit()));
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: FaIcon(FontAwesomeIcons.faucetDrip,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('Water Deficit',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => const abg_analyzer()));
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: FaIcon(FontAwesomeIcons.calculator,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('ABG Calculator',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => const ufperweight()));
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: FaIcon(FontAwesomeIcons.weightScale,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('UF per Weight',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => const osmolargap()));
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: FaIcon(FontAwesomeIcons.arrowsLeftRight,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('Osmolar Gap',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
ElevatedButton(
onPressed: () {
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: FaIcon(FontAwesomeIcons.prescriptionBottle,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('Urine Gap',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
]
),
),
),
)
],
),
),
);
}
}
兴趣代码
ElevatedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => const hypona_correction()));
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),), backgroundColor: const Color(0xFFFFFFFF), disabledForegroundColor: const Color(0xFF959595).withOpacity(0.38), disabledBackgroundColor: const Color(0xFF959595).withOpacity(0.12),
elevation: 2,
),
child:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: Icon(Icons.science,
color: Color(0xFF560027),
),
),
Flexible(
child: Text('HypoNa \nCorrection',
maxLines: 2,
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF880e4f),
),
),
),
],
)
),
谢谢你。
我尝试使用扩展且灵活的小部件，对文本中断没有影响。
您可以在 AutoSizeText() 中尝试“presetFontSizes”。欲了解更多信息：auto_size_text
AutoSizeText(
'HypoNa \nCorrection',
maxLines: 2,
textAlign: TextAlign.center,
presetFontSizes: [40, 16, 14],
style: TextStyle(
color: Color(0xFF880e4f),
),
),