Flutter-具有可用半径的动态半径的CircleAvatar

时间:2020-01-13 12:41:56

标签: flutter dart

我希望CircleAvatar占据可用空间的特定百分比(例如50%),而不是指定固定半径。您将如何处理?

2 个答案:

答案 0 :(得分:1)

我不确定这是否是最佳解决方案。

您可以使用LayoutBuilder来获取最大约束,然后根据它进行构建。

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            color: Colors.red,
            height: 100.0,
            width: 100.0,
            child: _buildCircleAvatar(),
          ),
          Container(
            color: Colors.green,
            height: 300.0,
            width: 300.0,
            child: _buildCircleAvatar(),
          ),
        ],
      ),
    );
  }

  Widget _buildCircleAvatar() {
    return LayoutBuilder(
      builder: (context, constraints) {
        final radius = min(constraints.maxHeight / 4, constraints.maxWidth / 4);
        return Center(
          child: CircleAvatar(
            radius: radius,
            backgroundImage: NetworkImage(
              "https://as.ftcdn.net/r/v1/pics/7b11b8176a3611dbfb25406156a6ef50cd3a5009/home/discover_collections/optimized/image-2019-10-11-11-36-27-681.jpg",
            ),
          ),
        );
      },
    );
  }
}

答案 1 :(得分:-1)

void setValue(const QVariant & value)

您可以使用它来获取响应头像