flutter实现image的圆形效果

image属性运用部分属性import 'package:flutter/material.dart';void main() {runApp(MyApp());}//自定义组件class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(home:

William_Tao（攻城狮）

1313人浏览 · 2020-08-06 16:45:48

William_Tao（攻城狮） · 2020-08-06 16:45:48 发布

image属性

在这里插入图片描述

运用部分属性

在这里插入图片描述

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("关于Text属性的界面"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: Image.network(
        "https://pic.baike.soso.com/ugc/baikepic2/0/20180926123725-2140348888_png_400_400_25800.jpg/0",
        repeat: ImageRepeat.noRepeat,
        fit: BoxFit.fill,
      
      ),
      width: 300,
      height: 300,
    );
  }
}

实现image的圆形效果

在这里插入图片描述

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("关于Text属性的界面"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
        child: Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(150),
        image: DecorationImage(
            image: new NetworkImage(
                "https://pic.baike.soso.com/ugc/baikepic2/0/20180926123725-2140348888_png_400_400_25800.jpg/0"),
            fit: BoxFit.cover),
      ),
    ));
  }
}