Flutter - 根据可用空间具有动态半径的 CircleAvatar

Question

我希望 CircleAvatar 占用可用空间的特定百分比(例如 50%)，而不是指定固定半径。你会如何处理？

Answer 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",
            ),
          ),
        );
      },
    );
  }
}