如何使用 ImageView 在 Widget 上创建边框？答案

【问题标题】：How to create a border on a Widget with an ImageView?如何使用 ImageView 在 Widget 上创建边框？
【发布时间】：2021-09-16 05:41:10
【问题描述】：

我想创建一个 xml 文件，在屏幕上显示带有透明边框的图像。我只能使用xml。

有没有办法做到这一点？

我使用 Flutter

【问题讨论】：

标签： android xml flutter widget

【解决方案1】：

使用以下代码创建圆形图像视图

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Image - tutorialkart.com'),
        ),
        body: Center(
          child: Container(
            color: Colors.cyan,
            width: double.infinity,
            child: Column(children: <Widget>[
              Container(
                width: 200,
                margin: EdgeInsets.all(10),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Image(
                    image: NetworkImage(
                        'https://www.tutorialkart.com/img/hummingbird.png'),
                  ),
                ),
              ),
              Container(
                width: 200,
                margin: EdgeInsets.all(10),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(50),
                  child: Image(
                    image: NetworkImage(
                        'https://www.tutorialkart.com/img/hummingbird.png'),
                  ),
                ),
              ),
            ]),
          ),
        ),
      ),
    );
  }
}

【讨论】：