flutter 如何根据浮动中的文本高度调整容器高度?

eqqqjvef  于 2023-03-19  发布在  Flutter
关注(0)|答案(4)|浏览(130)

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

}

下图为:

我希望包含“Bill Gates”下面文本的容器根据在那里输入的信息进行 Package 。
整个容器应该减少,因为我计划在这个定制的应用程序栏下面添加小部件,所以有什么方法可以实现这一点?
我试着用弹性的,但是不起作用。有人能帮我一下吗?

irlmq6kh

irlmq6kh1#

使用合适的 Package 盒:-

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

piwo6bdm2#

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

qv7cva1a

qv7cva1a3#

@安基特,

罪犯:

正如您提到的,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 Package 在FittedBox中,变化的文本长度Text小工具将导致它相应地调整其高度。
以下部分在此非常重要:

child: FittedBox(
                  fit: BoxFit.height,
hrysbysz

hrysbysz4#

可以使用flexible将文本小部件的高度换行,如下所示

Flexible(
      child: Container(
        child: Text(
          'This text will determine the height of the row item',
          style: TextStyle(fontSize: 16),
        ),
      ),
    ),

相关问题