[英]Flutter: How to adjust the height of a container as the maximum height of its sibling in a row
[英]How to Adjust container height according to the text height in flutter?
我正在構建一個 flutter 應用程序,我試圖在其中添加一個容器及其子文本。 我希望容器的高度與文本所需的一樣高。 但它取而代之的是指定的高度。
以下是我的代碼:
class ChangePassword extends StatefulWidget {
@override
_ChangePasswordState createState() =>
_ChangePasswordState();
}
class _ChangePasswordState extends State<ChangePassword> {
final GlobalKey<ScaffoldState> _scaffoldkey = new GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
key: _scaffoldkey,
drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
Container(
height: (MediaQuery.of(context).size.height * 0.23),
child: DrawerHeader(
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Row(
children: [
Container(
height: MediaQuery.of(context).size.width * 0.1,
width: MediaQuery.of(context).size.width * 0.1,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Theme.of(context).primaryColor,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(imageurl)),
boxShadow: [
BoxShadow(
blurRadius: 25,
color: Colors.black.withOpacity(0.2),
offset: Offset(0, 10),
)
],
),
),
Container(
height: MediaQuery.of(context).size.width * 0.15,
width: MediaQuery.of(context).size.width * 0.5,
padding: EdgeInsets.symmetric(horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: TextStyle(
fontSize: 15,
color: Colors.lightBlue[900],
fontWeight: FontWeight.bold),
),
Text(email),
SizedBox(
height: 2,
),
Row(
children: [
Icon(
Icons.remove_red_eye_outlined,
size: 12,
),
Text(
'View Profile',
style: TextStyle(
fontSize: 12,
),
)
],
)
],
),
),
],
)),
decoration: BoxDecoration(
color: Colors.white,
),
),
),
],
),
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.35,
child: Stack(children: [
Positioned(
height: MediaQuery.of(context).size.height * 0.23,
top: 0,
child: Padding(
padding: EdgeInsets.only(top: 50),
child: Container(
color: Color(0xff002060),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
child: Align(
alignment: Alignment.topCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
GestureDetector(
onTap: () {
_scaffoldkey.currentState.openDrawer();
},
child: new Container(
child: Icon(
Icons.menu,
color: Colors.white,
size: MediaQuery.of(context).size.height *
0.04,
),
padding: new EdgeInsets.all(7.0),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.3,
),
Container(
height:
MediaQuery.of(context).size.height * 0.07,
child: Center(
child: Text(
'Profile',
style: TextStyle(
color: Colors.white,
),
),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.3,
),
Icon(
Icons.search,
color: Colors.white,
size: MediaQuery.of(context).size.height * 0.04,
),
],
),
),
),
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.16,
left: MediaQuery.of(context).size.width * 0.03,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.height * 0.14,
height: MediaQuery.of(context).size.height * 0.14,
decoration: ShapeDecoration(
shape: CircleBorder(), color: Colors.white),
child: Padding(
padding: EdgeInsets.all(8.0),
child: DecoratedBox(
decoration: ShapeDecoration(
shape: CircleBorder(),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://thumbor.forbes.com/thumbor/fit-in/416x416/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5f4ebe0c87612dab4f12a597%2F0x0.jpg%3Fbackground%3D000000%26cropX1%3D292%26cropX2%3D3684%26cropY1%3D592%26cropY2%3D3987',
))),
),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.05,
),
Column(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.08,
child: Text(
'Bill Gates',
style: TextStyle(
fontSize: 25,
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Calibri'),
),
),
],
)
],
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.24,
left: MediaQuery.of(context).size.height * 0.165,
child: FittedBox(
fit: BoxFit.fill,
child: Container(
height: MediaQuery.of(context).size.height * 0.09,
width: MediaQuery.of(context).size.width * 0.6,
child: Text(
'Bill Gates welcomes you. Welcome to Microsoft. It gives me immense pleasure to announce Josh Hazlewood as it\'s new CEO. It is always immense pleasure to work with them. looking foward to have a great time with him.',
style: TextStyle(
color: Colors.black, fontFamily: 'Calibri'),
),
),
),
),
]),
),
],
)),
],
),
));
}
以下是圖片:
我希望根據在此處輸入的信息來包裝包含“比爾蓋茨”下方文本的容器。
整個容器應該減少,因為我計划在這個自定義的應用欄下方添加小部件,那么有什么辦法可以實現這一點嗎?
我嘗試使用靈活,但沒有奏效。 有人可以幫我嗎?
使用合適的盒子:-
FittedBox(
fit:BoxFit.fitHeight,
child:Text("Your text"),
),
不要提供容器的高度,它會自動調整。
@Ankit,
罪魁禍首:
正如您所提到的, Container
小部件旨在采用您明確指定的寬度和高度,因此它會按照您的要求執行操作。
在上述情況下,您應該避免為包含Text
小部件的Container
指定高度,如下所示。
將此代碼部分更改為:
Positioned(
top: MediaQuery.of(context).size.height * 0.24,
left: MediaQuery.of(context).size.height * 0.165,
child: FittedBox(
fit: BoxFit.fill,
child: Container(
height: MediaQuery.of(context).size.height * 0.09,
width: MediaQuery.of(context).size.width * 0.6,
child: Text(
'Bill Gates welcomes you. Welcome to Microsoft. It gives me immense pleasure to announce Josh Hazlewood as it\'s new CEO. It is always immense pleasure to work with them. looking foward to have a great time with him.',
style: TextStyle(
color: Colors.black, fontFamily: 'Calibri'),
),
),
),
),
對於以下代碼,我已刪除指定容器的height
屬性:
Positioned(
top: MediaQuery.of(context).size.height * 0.24,
left: MediaQuery.of(context).size.height * 0.165,
child: FittedBox(
fit: BoxFit.height,
child: Container(
width: MediaQuery.of(context).size.width * 0.6,
child: Text(
'Bill Gates welcomes you. Welcome to Microsoft. It gives me immense pleasure to announce Josh Hazlewood as it\'s new CEO. It is always immense pleasure to work with them. looking foward to have a great time with him.',
style: TextStyle(
color: Colors.black, fontFamily: 'Calibri'),
),
),
),
),
通過這樣做,並將Container
包裝在FittedBox
中,不同文本長度的Text
小部件將導致它相應地調整其高度。
以下部分在這里很重要:
child: FittedBox(
fit: BoxFit.height,
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.