Question

我想将CircularProgressIndicator放在RaisedButton内，但是当我这样做时，CircularProgressIndicator不适合按钮并伸出按钮。

我想缩小CircularProgressIndicator，使其适合RaisedButton内，我知道我可以使用SizedBox来做到这一点，但我希望它是自动的，不是我可以给它我想要的尺寸。我尝试了FittedBox，但所有选项都没有任何区别。

这是我按钮的代码：

RaisedButton(
    onPressed: () => print('hi'),
    shape: StadiumBorder(),
    color: Theme.of(context).primaryColor,
    child: Row(
      children: <Widget>[       
      Padding(
          padding: const EdgeInsets.only(right: 12, top: 6, bottom: 6),
          child: CircularProgressIndicator(
            backgroundColor: Colors.white,
            strokeWidth: 2,
          ),
        ),        
        Text('Loading'),
      ],
    ),
),

这是它的样子：

当我添加Padding时，它会增大按钮：

有什么方法可以自动实现吗？

编辑：

只需说清楚一点，我想要的最终效果是：

用户按下按钮前后：

我希望高度自动保持不变，而在SizedBox内没有魔术值。

Answer 1

我重新创建了您的案件，并能够在CircularProgressIndicator内正确看到RaisedButton并保持其大小。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Progress Button',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Progress Button'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () => print('hi'),
              shape: StadiumBorder(),
              color: Theme.of(context).primaryColor,
              child: Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(right: 12, top: 6, bottom: 6),
                    child: CircularProgressIndicator(
                      backgroundColor: Colors.white,
                      strokeWidth: 2,
                    ),
                  ),
                  Text('Loading'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

输出（两个平台）：

Answer 2

您可以使用mainAxisAlignment: MainAxisAlignment.spaceBetween在Row中的小部件之间留出空间。

您可以将Row小部件包装到Padding小部件中以对按钮中的整个内容进行填充。

Padding(
    padding: EdgeInsets.all(10),
    child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: <Widget>[       
           CircularProgressIndicator(
               backgroundColor: Colors.white,
               strokeWidth: 2,
           ),        
           Text('Loading'),
         ],
     ), 
)

Answer 3

看一下CircularProgressIndicator源代码，我发现硬编码的最小尺寸是36.0高度/宽度，因此没有办法自动变小。

Answer 4

这完全有可能。您将 CircularProgressIndicator 包裹在 SizedBox 中以将其限制为该大小。同样在 MainAxisSize.Min 中使用 Row 可以防止按钮尝试扩展到无限大。

ElevatedButton(
        onPressed: (){},
        style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.blue)),
        child: isLoading
            ? Padding(
                padding: const EdgeInsets.all(5.0),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text("Loading"),
                    SizedBox(
                      width: 5,
                    ),
                    SizedBox(
                      height: 20,
                      width: 20,
                      child: CircularProgressIndicator(
                        valueColor: AlwaysStoppedAnimation(Colors.white),
                        backgroundColor: Colors.blue,
                        strokeWidth: 3,
                      ),
                    )
                  ],
                ),
              )
            : Text("Not Loading"))

这为您提供以下内容

将一个CircularProgressIndicator放在RaisedButton的维护尺寸内

4 个答案: