颤振:-行列布局-文本溢出和空格消失
颤振:-行列布局-文本溢出和空格消失
提问于 2020-04-22 05:15:37
我创建了一个布局(下面的代码)，但是我面临着两个问题。
Issue 1: bottomRightSection中的文本溢出到屏幕之外，而不是进入下一行。
我试着把它放在一个包装和容器小部件中，我也尝试添加max line属性，但是它仍然溢出到外部。
Issue 2:在topRightSection上，我想把文本和图标按钮移到屏幕的末尾右边。
当我在中间添加Spacer()或将它们包装在扩展/灵活中时，它们就消失了。
我很感谢你的时间和支持
import 'package:flutter/material.dart';
class ProductItemUi extends StatefulWidget {
@override
_ProductItemUiState createState() => _ProductItemUiState();
}
class _ProductItemUiState extends State<ProductItemUi> {
@override
Widget build(BuildContext context) {
Widget leftSection() {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'New',
style: TextStyle(
color: Colors.red,
fontSize: 18.0,
fontWeight: FontWeight.w400,
),
),
SizedBox(
height: 10.0,
),
CircleAvatar(
backgroundColor: Colors.grey,
radius: 25.0,
),
],
);
}
Widget topRightSection() {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Product Name',
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
),
),
Text(
'Product Price',
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
),
),
],
),
//Spacer(),
FlatButton(
onPressed: () {},
child: Text(
'Cart',
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
),
),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.more_vert,
color: Colors.black,
),
)
],
);
}
Widget bottomRightSection() {
return Container(
color: Colors.grey[300],
height: 50.0,
child: Text(
'This text will be a long description about the product. Lorem ipsum dolor sit amet, consectetur adipis elit.',
maxLines: 2,
overflow: TextOverflow.fade,
softWrap: false,
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
),
),
);
}
return Scaffold(
backgroundColor: Colors.black,
body: Container(
margin: EdgeInsets.only(top: 100.0),
width: MediaQuery.of(context).size.width,
height: 100.0,
color: Colors.white,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
leftSection(),
SizedBox(
width: 5.0,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
topRightSection(),
bottomRightSection(),
],
),
],
),
),
);
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-22 06:29:27
您只需要正确地使用Expanded和MediaQuery，只是我在下面的示例中使用了。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class HomeScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _HomeScreen();
}
}
class _HomeScreen extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child:
Wrap(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.width * 0.3,
color: Colors.lightGreen,
margin: EdgeInsets.only(top: 20.0, left: 5.0, right: 5.0),
padding: EdgeInsets.all(5.0),
child: Row(
children: <Widget>[
Expanded(
flex: 2,
child: Align(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Text(
'New',
style: TextStyle(
color: Colors.red,
fontSize: 18.0,
fontWeight: FontWeight.w400,
),
),
SizedBox(
height: 10.0,
),
CircleAvatar(
backgroundColor: Colors.grey,
radius: MediaQuery.of(context).size.width * 0.08,
),
],
),
),
),
Expanded(
flex: 8,
child: Column(
children: <Widget>[
Expanded(
flex: 5,
child: Row(
children: <Widget>[
Expanded(
flex: 6,
child: Align(
alignment: Alignment.centerLeft,
child: Column(
children: <Widget>[
Text(
'Product Name',
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
),
),
Text(
'Product Price',
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
),
),
],
),
),
),
Expanded(
flex: 4,
child:
Align(
alignment: Alignment.topRight,
child: Row(
children: <Widget>[
FlatButton(
onPressed: () {},
child: Text(
'Cart',
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
),
),
),
GestureDetector( onTap: () {}, child: Icon(
Icons.more_vert,
color: Colors.black,
) )
],
),
)
,
)
],
),
),
Expanded(
flex: 5,
child: Text(
'This text will be a long description about the product. Lorem ipsum dolor sit amet, consectetur adipis elit.',
textAlign: TextAlign.left,
maxLines: 3,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
),
),
)
],
),
)
],
),
)
],
)
,
);
}
}输出如下
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61357763
复制相关文章
相似问题
腾讯云开发者
