美文网首页
Flutter Text、ListView、ScrollVie

Flutter Text、ListView、ScrollVie

作者: 星邪Ara | 来源:发表于2022-04-22 13:40 被阅读0次

    Text高度自适应核心逻辑

    Row+Expanded包裹Text文本

    ListView、ScrollView这一类的Item高度自适应方式

      Widget _itemView(item) {
        return Container(
          margin: EdgeInsets.only(
            top: setHeight(12),
            bottom: setHeight(20),
            left: setWidth(32),
            right: setWidth(32),
          ),
          child: Ink(
            decoration: BoxDecoration(
              color: XColors.greyF8,
              borderRadius: BorderRadius.circular(setWidth(10)),
            ),
            child: InkWell(
              borderRadius: BorderRadius.circular(setWidth(10)),
              onTap: () {},
              child: Container(
                padding: EdgeInsets.symmetric(
                  vertical: setWidth(20),
                  horizontal: setWidth(24),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      //使用Row+Expanded包裹Text文本就会自适应高度
                      child: Row(
                        children: [
                          Expanded(
                            child: Text(
                              "测试测试测试测试测试测试测试测试测试测试测试测"
                              "测试测试测试测试测试测试测试测试测试测试测试测"
                              "试测试测试测试测试测试测试测试测试测试测试测试",
                              style: TextStyle(
                                color: XColors.textColor33,
                                fontSize: setSp(28),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Gaps.getHeight20(),
                    Container(
                      //使用Row+Expanded包裹Text文本就会自适应高度
                      child: Row(
                        children: [
                          Expanded(
                            child: Text(
                              "测试测试测试测试测试测试测试测试测试测试测试测"
                              "测试测试测试测试测试测试测试测试测试测试测试测"
                              "试测试测试测试测试测试测试测试测试测试测试测试",
                              style: TextStyles.getColor99Size24(),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    

    Text自适应高度

      Widget _text() {
        return SizedBox(
          //width很重要,不设置宽度的话内容会不显示,Row要知道父Widget宽度
          width: ScreenUtil().screenWidth,
          //使用Row+Expanded包裹Text文本就会自适应高度
          child: Row(
            children: [
              Expanded(
                child: Text(
                  "测试测试测试测试测试测试测试测试测试测试测试测"
                  "测试测试测试测试测试测试测试测试测试测试测试测"
                  "试测试测试测试测试测试测试测试测试测试测试测试",
                  style: TextStyle(
                    fontSize: setSp(28.0),
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        );
      }
    

    相关文章

      网友评论

          本文标题:Flutter Text、ListView、ScrollVie

          本文链接:https://www.haomeiwen.com/subject/untnertx.html