Question

我想在蓝色圆圈（包含RaisedButton的容器）中放置一个BoxDecoration。

据我了解，RaisedButton通过缩小到其child的大小或最小参考大小（以较大者为准）来调整自身大小。但是对我来说，RaisedButton会自动膨胀以覆盖整个屏幕。即使使用显式SizedBox和width将其包装在height中，它仍会这样做：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.circle,
      ),
      child: SizedBox(
        width: 100,
        height: 100,
        child: RaisedButton(
            color: Colors.orange,
            child: Text(
              "Test",
            ),
            onPressed: () {}),
      ),
    ),
  ));
}

结果如下：

Answer 1

您需要添加alignment属性。

Align the child within the container

正确的方法是：

runApp(
  MaterialApp(
      home: Container(
        alignment: Alignment.center,
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: Colors.blue,
          shape: BoxShape.circle,
        ),
        child: SizedBox(
          width: 100,
          height: 100,
          child: RaisedButton(
              padding: EdgeInsets.all(0),
              color: Colors.orange,
              child: Text("Test",),
              onPressed: () {}),
        ),
      )
  ),
);

Answer 2

您好，您可以使用椭圆形剪辑小部件来获得此效果。这是代码：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Container(
        width: 500,
        height: 500,
        color: Colors.green,
        child: Center(
          child: ClipOval(
            child: Container(
              color: Colors.blue,
              height: 120.0, 
              width: 120.0, 
              child: RaisedButton(child: Text('text'), onPressed: (){},),
            ),
          ),
        ),
      ),
    ),
  );
}

颤抖：RaisedButton大于其SizedBox

2 个答案: