Flutter - 如何让Container的高度与子Text的长度相同？

Question

晚上好，开发者们，

我正在尝试找到一种方法，使我的父容器的高度与子文本小部件的内容相等。 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),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      )),
    );
  }
}

- Biobrolly

---

简单来说：您希望容器的高度等于子元素的宽度（即文本小部件）。是这样吗？那么我建议使用AspectRatio类，您可以在其中定义容器始终为正方形。https://api.flutter.dev/flutter/widgets/AspectRatio-class.html - Manuel

谢谢您的输入。我想要的是容器高度与子定位容器高度相等，而不是宽度。最后一个Positioned()中的Text widget(Text(textDes))会根据获取的文本内容始终发生变化，这就是容器高度变化的原因。希望你能理解。 - Biobrolly

Answer 1

将您的文本小部件包装在“Expanded”中，并删除硬编码的高度值“1400”。

                          Expanded(
                            child: Text(
                              textDes,
                              style: TextStyle(
                                fontSize: 16.0,
                                color: Color.fromRGBO(117, 117, 117, 1),
                              ),
                            ),
                          ),

希望有所帮助!!

- Arun Yogeshwaran

---

谢谢您的快速回复和建议。当我按照您的建议操作时，整个容器都消失了。唯一可见的是设置高度为400的图像。第二个容器，包括文本(textDes)，不再存在。您有什么想法吗？谢谢。 - Biobrolly

Answer 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),
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    );
                  }),
            ),
          ],
        ),
      ),
    );
  }
}

- Biobrolly