ภาพมุมโค้งมนใน Flutter


123

ฉันใช้ Flutter เพื่อสร้างรายการข้อมูลเกี่ยวกับภาพยนตร์ ตอนนี้ฉันต้องการให้ภาพปกทางด้านซ้ายเป็นภาพมุมมน ฉันทำสิ่งต่อไปนี้ แต่ไม่ได้ผล ขอบคุณ!

    getItem(var subject) {
    var row = Container(
      margin: EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          Container(
            width: 100.0,
            height: 150.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              color: Colors.redAccent,
            ),
            child: Image.network(
              subject['images']['large'],
              height: 150.0,
              width: 100.0,
            ),
          ),
        ],
      ),
    );
    return Card(
      color: Colors.blueGrey,
      child: row,
    );
  }

ดังต่อไปนี้

ใส่คำอธิบายภาพที่นี่


คุณรู้หรือไม่ว่าทำไมวิธีนี้ถึงไม่ได้ผล?
Martin

คำตอบ:


357

ใช้ClipRRectมันจะทำงานได้อย่างสมบูรณ์

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)

9
ขอบคุณ! ฉันทำตามที่คุณบอกแล้วเสริมfit: BoxFit.fillก็ดูดีทีเดียว
Liu Silong

2
ขอบคุณ - คุณมีความคิดเกี่ยวกับวิธีการสร้างเส้นขอบที่มีสีสันให้กับรูปภาพของคลิปหรือไม่?
iKK

3
@iKK - ห่อไว้ในภาชนะที่มีกล่องการตกแต่งด้วยเส้นขอบ / เส้นขอบที่เหมาะสมอุปกรณ์ประกอบฉากวิทยุดังนี้: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(3.0), border: Border.all(color: Colors.grey[300])), child: ClipRRect( borderRadius: BorderRadius.circular(3.0), child: Image.network( uri, fit: BoxFit.fill, width: imageDimension, height: imageDimension, ), ), )
Daniel Allen

1
ขอบคุณเคล็ดลับ: ใช้งานได้เฉพาะที่มีความกว้างและความสูงเดียวกัน
ÁlvaroAgüero

50

คุณยังสามารถใช้CircleAvatarซึ่งมาพร้อมกับความกระพือปีก

CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)

2
นี่คือคำตอบที่ดีที่สุด ฉันทำพิเศษbackgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture,
saviour123

@ saviour123 ไม่ใช่ทุกภาพที่มีมุมโค้งมนจะเป็น 'อวตาร' คำตอบที่ยอมรับคือคำตอบทั่วไป
nipunasudha

ไม่สามารถกำหนดความสูงหรือความกว้างด้วยวิดเจ็ตนี้ซึ่งเป็นปัญหา
papillon

38

การใช้ClipRRectคุณจำเป็นต้องใช้ฮาร์ดโค้ดBorderRadiusดังนั้นหากคุณต้องการสิ่งที่เป็นวงกลมให้ใช้ClipOvalแทน

ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),

2
คำตอบที่ง่ายที่สุด!
Alvin Konda

1
หากภาพย่อยไม่ใช่รูปสี่เหลี่ยมจัตุรัสจะเป็นรูปไข่ในโซลูชันนี้
Bilal Şimşek

29

ลองสิ่งนี้แทนได้ผลสำหรับฉัน:

Container(
  width: 100.0,
  height: 150.0,
  decoration: BoxDecoration(
    image: DecorationImage(
        fit: BoxFit.cover, image: NetworkImage('Path to your image')),
    borderRadius: BorderRadius.all(Radius.circular(8.0)),
    color: Colors.redAccent,
  ),
),

คำแนะนำของคุณมีประโยชน์อย่างแน่นอนขอบคุณ! แต่ถ้าเนื้อหาของคอนเทนเนอร์ไม่ใช่แค่รูปภาพ แต่เป็นวิดเจ็ตล่ะ? ความคิดใด ๆ ?
Oleksandr


5

สำหรับภาพให้ใช้สิ่งนี้

ClipOval(
    child: Image.network(
        'https://url to your image',
        fit: BoxFit.fill,
    ),
);

ในขณะที่แอสเซทอิมเมจใช้สิ่งนี้

ClipOval(
    child: Image.asset(
        'Path to your image',
        fit: BoxFit.cover,
    ),
)

1
ฉันได้ใช้สิ่งนี้เป็นคำตอบแล้วคุณไม่ได้ให้ประโยชน์อะไรเลย -1 จากฉัน
CopsOnRoad

4

ด้วยเวอร์ชันใหม่ของชุดรูปแบบการกระพือและวัสดุคุณจำเป็นต้องใช้วิดเจ็ต "Padding" ด้วยเพื่อให้มีรูปภาพที่ไม่เต็มคอนเทนเนอร์

ตัวอย่างเช่นหากคุณต้องการแทรกภาพโค้งมนใน AppBar คุณต้องใช้ช่องว่างภายในไม่เช่นนั้นภาพของคุณจะสูงเท่ากับ AppBar เสมอ

หวังว่านี่จะช่วยใครบางคนได้

InkWell(
        onTap: () {
            print ('Click Profile Pic');
        },
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipOval(
                child: Image.asset(
                    'assets/images/profile1.jpg',
                ),
            ),
        ),
    ),

3

คุณสามารถใช้ ClipRRect ได้ดังนี้:

  Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(25),
                    child: Image.asset(
                      'assets/images/pic13.jpeg',
                      fit: BoxFit.cover,
                    ),
                  ),
                )

คุณสามารถกำหนดรัศมีของคุณหรือผู้ใช้เฉพาะสำหรับ topLeft หรือ bottom left เช่น:

Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25)
                ,bottomLeft: Radius.circular(25)),
                child: Image.asset(
                  'assets/images/pic13.jpeg',
                  fit: BoxFit.cover,
                ),
              ),
            )

2

ใช้ ClipRRect กับคุณสมบัติของภาพที่กำหนดให้พอดี: BoxFit.fill

ClipRRect(
          borderRadius: new BorderRadius.circular(10.0),
          child: Image(
            fit: BoxFit.fill,
            image: AssetImage('images/image.png'),
            width: 100.0,
            height: 100.0,
          ),
        ),

1

ใช้ ClipRRect จะช่วยแก้ปัญหาของคุณได้

      ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              child: Image.network(
                Constant.SERVER_LINK + model.userProfilePic,
                fit: BoxFit.cover,
              ),
            ),

0

ใช้วิธีนี้ในภาพวงกลมนี้ก็ใช้ได้เช่นกัน + คุณมีตัวโหลดล่วงหน้าสำหรับอิมเมจเครือข่ายด้วย:

new ClipRRect(
     borderRadius: new BorderRadius.circular(30.0),
     child: FadeInImage.assetNetwork(
          placeholder:'asset/loader.gif',
          image: 'Your Image Path',
      ),
    )

0

ลองใช้งานได้ดี

Container(
  height: 220.0,
  width: double.infinity,
  decoration: BoxDecoration(
    borderRadius: new BorderRadius.only(
      topLeft: Radius.circular(10),
       topRight: Radius.circular(10),
    ),
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage(
        photoUrl,
      ),
     ),
   ),
);

-1

การตกแต่งผู้ใช้รูปภาพสำหรับคอนเทนเนอร์

  @override
  Widget build(BuildContext context) {
    final alucard = Container(
        decoration: new BoxDecoration(
        borderRadius: BorderRadius.circular(10),
          image: new DecorationImage(
              image: new AssetImage("images/logo.png"),
              fit: BoxFit.fill,
          )
        )
    );
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.