Flutter - 容器高度与子 Text.length 相同？
Posted
技术标签:
【中文标题】Flutter - 容器高度与子 Text.length 相同？【英文标题】：Flutter - Container height same as child Text.length? 【发布时间】：2020-03-26 18:12:25 【问题描述】：各位开发者晚上好，
我正在尝试为我的父容器找到一种将其高度设置为等于子文本小部件内容的方法。 Text 小部件中的文本 (textDes) 正在发生变化。它可以是短的也可以是长的，因此我不能将 height: 设置为一个特定的数字，比如 1400，因为它看起来很难看。
请善待并帮助我，尝试几个小时。
import 'package:angelbay_bungalows/screens/overview.dart';
import 'package:angelbay_bungalows/widgets/drawer.dart';
import 'package:flutter/material.dart';
class Amenities extends StatelessWidget
final String titleTop;
final String textDes;
final String img;
Amenities(this.titleTop, this.textDes, this.img);
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context)
var screenSize = MediaQuery.of(context).size;
return Scaffold(
key: scaffoldKey,
drawer: AppDrawer(),
body: SingleChildScrollView(
child: Container(
height: 1400,
width: screenSize.width,
child: Stack(
// overflow: Overflow.visible,
children: <Widget>[
Image.asset(
"$img",
height: 400.0,
width: screenSize.width,
fit: BoxFit.cover,
),
Positioned(),
Positioned(),
Positioned(
top: 375.0,
child: Container(
// height: ,
width: screenSize.width,
decoration: BoxDecoration(
color: Color.fromRGBO(216, 216, 216, 1),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: Padding(
padding: const EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
titleTop,
style: TextStyle(
color: Colors.black,
fontSize: 26.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 40.0,
),
Text(
'Description',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(50, 54, 67, 1),
),
),
SizedBox(
height: 20.0,
),
Text(
textDes,
style: TextStyle(
fontSize: 16.0,
color: Color.fromRGBO(117, 117, 117, 1),
),
),
],
),
),
),
),
],
),
)),
);
【问题讨论】：
说起来更简单：您希望容器的高度等于孩子的宽度（即文本小部件）。那是对的吗？然后我建议AspectRatio 类，你可以在那里定义，容器总是方形的。 api.flutter.dev/flutter/widgets/AspectRatio-class.html
感谢您的意见。我想要的是容器的高度等于孩子的定位容器高度，而不是宽度。最后一个 Positioned() Text(textDes) 中的最后一个 Text 小部件，它总是根据它获取的文本而变化。这就是容器高度发生变化的原因。希望大家理解
【参考方案1】：
将您的 Text 小部件包装在 Expanded 中并删除硬编码的 1400 高度
Expanded(
child: Text(
textDes,
style: TextStyle(
fontSize: 16.0,
color: Color.fromRGBO(117, 117, 117, 1),
),
),
),
希望对你有帮助！！
【讨论】：
感谢您的快速响应和投入。当我按照您的建议进行操作时，完整的容器就会消失。唯一可见的是设置高度为 400 的图像。包含 Text(textDes) 的第二个容器不再存在。有什么想法吗？谢谢【参考方案2】：经过长时间的努力，这就是我想出的方法。
import 'package:angelbay_bungalows/screens/overview.dart';
import 'package:angelbay_bungalows/widgets/drawer.dart';
import 'package:flutter/material.dart';
class Amenities extends StatelessWidget
final String titleTop;
final String textDes;
final String img;
Amenities(this.titleTop, this.textDes, this.img);
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context)
var screenSize = MediaQuery.of(context).size;
return Scaffold(
key: scaffoldKey,
drawer: AppDrawer(),
body: Container(
color: Color.fromRGBO(216, 216, 216, 1),
child: Stack(
// overflow: Overflow.visible,
children: <Widget>[
Image.asset(
"$img",
height: 400,
width: screenSize.width,
fit: BoxFit.cover,
),
Positioned(
top: 50.0,
left: 10.0,
child: GestureDetector(
onTap: ()
Navigator.push(
context,
MaterialPageRoute(
builder: (context)
return Overview();
,
),
);
,
child: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: 30.0,
),
),
),
Positioned(
top: 50.0,
right: 10.0,
child: GestureDetector(
onTap: () => scaffoldKey.currentState.openDrawer(),
child: Icon(
Icons.menu,
color: Colors.white,
size: 30.0,
)),
),
Padding(
padding: const EdgeInsets.only(top: 40),
child: DraggableScrollableSheet(
initialChildSize: 0.5,
minChildSize: 0.5,
maxChildSize: 0.8,
builder: (context, controller)
return SingleChildScrollView(
controller: controller,
child: Container(
width: screenSize.width,
decoration: BoxDecoration(
color: Color.fromRGBO(216, 216, 216, 1),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
titleTop,
style: TextStyle(
color: Colors.black,
fontSize: 26.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 40.0,
),
Text(
'Description',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(50, 54, 67, 1),
),
),
SizedBox(
height: 20.0,
),
Text(
textDes,
style: TextStyle(
fontSize: 16.0,
color: Color.fromRGBO(117, 117, 117, 1),
),
)
],
),
),
),
);
),
),
],
),
),
);
【讨论】：
以上是关于Flutter - 容器高度与子 Text.length 相同？的主要内容，如果未能解决你的问题，请参考以下文章
在 Flutter 中，您如何制作动画以将容器从 0 高度扩展到其内容的高度？