Flutter技术文章

005.1 flutter_svg 使用demo【入门】

2020-03-13  本文已影响0人  码农二哥

展示矩形

// ok
    return Positioned(
      left: x, 
      top: y, 
      child: Container(
        // padding: const EdgeInsets.all(10.0),
        // color: Colors.yellow,
        width: parseWidth(width),
        height: parseHeight(height),
        child: SvgPicture.string('''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
                                      <rect width="100" height="50" x="10" y="70" fill="rgb(255, 0, 0)" stroke="blue" stroke-opacity="1.0" stroke-width="10" rx="20" ry="15"/>
                                    </svg>''')
          ),
      );

展示Path

// ok
    return SvgPicture.string('''<svg viewBox="0 0 1000 1000"
                                  width="100"
                                  height="200"
                                  stroke="red" 
                                  stroke-width="20"
                                  fill="grey"
                                  xmlns="http://www.w3.org/2000/svg">
                                  <path d="M501.298 207.941l60.505-60.131c100.425-99.805 262.59-99.805 363.015 0 0.372 0.37 0.743 0.741 1.113 1.113 99.010 99.625 98.512 260.65-1.113 359.66l-423.518 420.902-426.117-423.481c-99.625-99.010-100.124-260.035-1.113-359.66 0.37-0.372 0.741-0.743 1.113-1.113 100.425-99.805 262.59-99.805 363.015 0l63.1 62.71z" 
                                    fill="yellow"
                                    stroke="purple"
                                    stroke-width="10"
                                    ></path>
                                </svg>''');  
image.png

使用图片进行fill(需要自己定制flutter_svg已支持该功能)

// ok for image fill
    return Positioned(
      left: x, 
      top: y, 
      child: Container(
        // padding: const EdgeInsets.all(10.0),
        // color: Colors.yellow,
        width: parseWidth(width),
        height: parseHeight(height),
        child: SvgPicture.string('''<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
                                        <defs>
                                              <image id="pattern1" height="468" width="657" preserveAspectRatio="none" xlink:href="https://p6-tt.byteimg.com/img/ad-tetris-site/file/1583993327582/7c97780ea7eba5d91bb5895e9765d18d~noop.webp" />
                                        </defs>
                                        <path d="M1000 500c0 276.143-223.857 500-500 500s-500-223.857-500-500c0-276.143 223.857-500 500-500s500 223.857 500 500z" fill="url(#pattern1)"></path>
                                    </svg>''', 
                                width: width, 
                                height: height,
                                fit: BoxFit.fill,//这里用的是fill,所以需要container来保证宽高比
                                ),
image.png
上一篇下一篇

猜你喜欢

热点阅读