如何设置颤动中容器小部件的动态高度?

发布于 2025-02-09 23:02:24 字数 1933 浏览 1 评论 0 原文

我在容器内有文本小部件,如果文本超过4行,则溢出到容器底部。如何为此容器设置动态高度,该容器将取决于文本线条并避免底部溢出?目前,容器具有固定值,但是如果我删除此值,它将消失。

home component 

Widget build(BuildContext context) {
 return Container (
   child:    SliverToBoxAdapter(
                        child: Container(
                          height: 180,
                          margin: EdgeInsets.only(top: 10),
                          child: CustomeInfoWidget(
                            infoData: _infoDataList,
                          ),
                        ),
                      ),
) 
}

CustomeInfoWidget

Widget build(BuildContext context) {
    final double _width = MediaQuery.of(context).size.width;

    return Container(
      margin: EdgeInsets.only(top: 15, left: 15, right: 15),
      child: Stack(
        children: [
          PageView.builder(
            itemCount: widget._infoDataList.length,
            controller: _pageController,
            
            itemBuilder: (BuildContext context, int index) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: _width - 10,
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 10),
                      child: Text(widget._infoDataList[index].title,
                          textAlign: TextAlign.left,
                         
                  ),
                  Container(
                    child: Text(
                      widget._infoDataList[index].content,
                    
                    ),
                  )
                ],
              );
            },
          ),
        
        ],
      ),
    );
  }

I have text widget inside of container and if text is more than 4 lines this is overflowing to bottom of container. How can I set dynamic height for this container that will depends of text lines and avoid bottom overflow ? At the moment container have fixed value but if I remove this value it will disappear.

enter image description here

home component 

Widget build(BuildContext context) {
 return Container (
   child:    SliverToBoxAdapter(
                        child: Container(
                          height: 180,
                          margin: EdgeInsets.only(top: 10),
                          child: CustomeInfoWidget(
                            infoData: _infoDataList,
                          ),
                        ),
                      ),
) 
}

CustomeInfoWidget

Widget build(BuildContext context) {
    final double _width = MediaQuery.of(context).size.width;

    return Container(
      margin: EdgeInsets.only(top: 15, left: 15, right: 15),
      child: Stack(
        children: [
          PageView.builder(
            itemCount: widget._infoDataList.length,
            controller: _pageController,
            
            itemBuilder: (BuildContext context, int index) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: _width - 10,
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 10),
                      child: Text(widget._infoDataList[index].title,
                          textAlign: TextAlign.left,
                         
                  ),
                  Container(
                    child: Text(
                      widget._infoDataList[index].content,
                    
                    ),
                  )
                ],
              );
            },
          ),
        
        ],
      ),
    );
  }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

稚气少女 2025-02-16 23:02:24

用SingleChildScrollview包裹容器或为文本窗口设置溢出

wrap your container with Singlechildscrollview or set overflow for your Text widget Flutter - Wrap text on overflow, like insert ellipsis or fade

请帮我爱他 2025-02-16 23:02:24

在您的家庭组件上,您正在修复 CustomeInfowidget 的高度。您可以删除此。

 SliverToBoxAdapter(
   child: Container(
    //  height: 180,// remove this
      margin: EdgeInsets.only(top: 10),
          child: CustomeInfoWidget(

您可以使用 sliverFillRemaining pageView

SliverFillRemaining(
  child:  PageView.builder(

或者,您可以使用 singlechildScrollview 将文本容器包裹起来,以供内部滚动。

您还可以计算文本高度并提供。

我如何在Flutter 中获取文本窗口的大小

On your home component, you are fixing the height of CustomeInfoWidget. You can remove this.

 SliverToBoxAdapter(
   child: Container(
    //  height: 180,// remove this
      margin: EdgeInsets.only(top: 10),
          child: CustomeInfoWidget(

You can use SliverFillRemaining for PageView.

SliverFillRemaining(
  child:  PageView.builder(

Or you can wrap your text container with Singlechildscrollview for inner scroll.

You can also calculate the text height and provide it.

How can I get the size of the Text widget in Flutter

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文