Flutter Text、ListView、ScrollVie

2022-04-22  本文已影响0人  星邪Ara

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,
              ),
            ),
          ),
        ],
      ),
    );
  }
上一篇下一篇

猜你喜欢

热点阅读