Flutter:如何在一行内设置可变长度字符串？
Flutter:如何在一行内设置可变长度字符串？
提问于 2020-03-11 19:26:46
我试图在一行中设置一个字符串，但字符串的长度是可变的，即数据是从API获取的。然后在行中设置它，但目前，由于长度较大，它显示为A RenderFlex overflowed by 48 pixels on the right.
我一直在尝试使用扩展/flex/flexible，但得到了不正确的父级错误。(不知道怎么做，因为我是新来的)
所以，请帮助解决这个renderflex溢出的问题。
以下是我的方法：
void confirmpayment(double amount, String description) {
final itemsSubmit = <Widget>[
Image.asset(
'images/payments.jpg',
width: MediaQuery.of(context).size.width,
fit: BoxFit.contain,
),
ListTile(
title: AutoSizeText(
'Confirmation',
style: TextStyle(fontSize: 20),
),
subtitle: AutoSizeText(
'Hey Gaurav, please confirm examination as payment once done will be irrevocable.',
style: TextStyle(color: Colors.grey),
),
// onTap: () {},
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 20,
),
Padding(
padding: EdgeInsets.only(top: 10),
child: AutoSizeText(
'Exam:',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 16,
),
),
),
Spacer(),
CheckboxGroup(
orientation: GroupedButtonsOrientation.VERTICAL,
labelStyle: TextStyle(fontSize: 15),
labels: [
...listexam.map((location) {
return location['name']; //this is where string is set from api data
}).toList()
],
checked: _checked,
),
SizedBox(
width: 20,
),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 20,
),
Padding(
padding: EdgeInsets.only(top: 1),
child: AutoSizeText(
'Plan',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 16,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(top: 1),
child: AutoSizeText(
description,
textAlign: TextAlign.right,
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 15,
),
),
),
),
SizedBox(
width: 20,
),
]),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 20,
),
Padding(
padding: EdgeInsets.only(top: 1),
child: AutoSizeText(
'Amount',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 16,
),
)),
Expanded(
child: Padding(
padding: EdgeInsets.only(top: 1),
child: AutoSizeText(
'Rs. ' + amount.toString(),
textDirection: TextDirection.ltr,
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 15,
// fontWeight: FontWeight.w500,
),
),
),
),
SizedBox(
width: 20,
),
]),
SizedBox(
height: 40,
),
Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[
RaisedButton(
elevation: 1,
// onPressed: _showSheetSubmit,
color: Colors.grey[200],
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(28.0),
side: BorderSide(color: Colors.grey[200])),
onPressed: null,
child: AutoSizeText(
"Cancel",
style: TextStyle(
fontSize: 16,
// fontFamily: 'lato',
letterSpacing: 1,
color: Colors.white,
),
)),
RaisedButton(
elevation: 1,
color: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(28.0),
side: BorderSide(color: Colors.green)),
onPressed: () {
openCheckout(amount, description);
},
child: AutoSizeText(
"Buy",
style: TextStyle(
fontSize: 16,
// fontFamily: 'lato',
color: Colors.white,
letterSpacing: 1),
)),
]),
SizedBox(
height: MediaQuery.of(context).size.height / 12,
),
];
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
backgroundColor: Colors.white,
context: context,
builder: (BuildContext _) {
return Container(
// color: Colors.white,
child: Wrap(
children: itemsSubmit,
),
);
},
isScrollControlled: true,
// isDismissible: true
);
}以下是模拟：
回答 1
Stack Overflow用户
发布于 2020-03-11 19:52:03
我不会尝试裁剪将进入Text小部件的String数据，而是使用LayoutBuilder来获取Row小部件可以占用的可用空间。然后，我会将Text包装在SizedBox中，以限制Text小部件的最大宽度。最后，我将设置Text小部件的overflow属性，以便在文本长度超过可用空间时显示一个省略号。
这是我为你写的一个小应用，看看如何做到这一点。你可以在DartPad上运行它来使用它。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
LayoutBuilder(
builder: (context, constraints) {
return Row(
children: <Widget>[
SizedBox(
width: constraints.maxWidth,
child: Text(
'This is a very very long text that might overflow the available rendering space',
overflow: TextOverflow.ellipsis,
),
),
],
);
},
),
],
),
),
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60634951
复制相关文章
相似问题
腾讯云开发者
