如何根据 flutter 中的文字高度调整容器高度？

Question

我正在构建一个 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'),
                        ),
                      ),
                    ),
                  ),
                ]),
              ),
                ],
              )),
              
            ],
          ),
        ));

}

以下是图片：

我希望根据在此处输入的信息来包装包含“比尔盖茨”下方文本的容器。

整个容器应该减少，因为我计划在这个自定义的应用栏下方添加小部件，那么有什么办法可以实现这一点吗？

我尝试使用灵活，但没有奏效。 有人可以帮我吗？

Answer 1

使用合适的盒子：-

FittedBox(
   fit:BoxFit.fitHeight,
   child:Text("Your text"),
),

Answer 2

不要提供容器的高度，它会自动调整。

Answer 3

@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,