flutter - 如何展开图标按钮？

Question

嗨，我正在努力实现这一目标

这是我的脚本

  Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
          Container(
            child: FlatButton.icon(
                onPressed: null,
                icon: Icon(Icons.add),
                label: Text("satu")),
            color: Colors.red,
          ),
          Column(
            children: <Widget>[
              Container(
                child: FlatButton.icon(
                    onPressed: null,
                    icon: Icon(Icons.add),
                    label: Text("dua")),
                color: Colors.green,
              ),
              SizedBox(
                height: 10,
              ),
              Container(
                child: FlatButton.icon(
                    onPressed: null,
                    icon: Icon(Icons.add),
                    label: Text("tiga")),
                color: Colors.yellow,
              ),

            ],
          ),
          Column(
            children: <Widget>[
              Container(
                child: FlatButton.icon(
                    onPressed: null,
                    icon: Icon(Icons.add),
                    label: Text("dua")),
                color: Colors.red,
              ),
              SizedBox(
                height: 10,
              ),
              Container(
                child: FlatButton.icon(
                    onPressed: null,
                    icon: Icon(Icons.add),
                    label: Text("tiga")),
                color: Colors.blue,
              ),

            ],
          ),
        ]),

但是，我的脚本的结果是这样的。

然后我尝试对我的 FlatButton.icon 使用 SizeBox.expand 但它抛出一个错误

这里是错误

I/flutter ( 5643): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 5643): The following assertion was thrown during performLayout(): I/flutter ( 5643): BoxConstraints forces an infinite width and infinite height. I/flutter ( 5643): These invalid constraints were provided to RenderSemanticsAnnotations's layout() function by the I/flutter ( 5643): following function, which probably computed the invalid constraints in question: I/flutter ( 5643):
RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:259:13) I/flutter ( 5643): The offending constraints were: I/flutter ( 5643):
BoxConstraints(biggest)

任何帮助将不胜感激

Answer 1

您应该使用 Expanded 类来使小部件填满所有剩余空间。我使用 GestureDetector 来处理 Container 上的点击事件，而不是 FlatButton...

我创建了一个简短的示例:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Stackoverflow example'),
      ),

      body: Container(
        margin: EdgeInsets.all(10),

        height: 150,

        child: Row(          
          children: <Widget>[
            // First
            Expanded(
              child: GestureDetector(
                child: Container(
                  margin: EdgeInsets.only(right: 5),

                  decoration: BoxDecoration(
                    color: Colors.red,

                    borderRadius: BorderRadius.all(
                      Radius.circular(10)
                    )
                  ),

                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.add,
                        color: Colors.white,                      
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        'Motors',
                        style: TextStyle(
                          color: Colors.white
                        ),
                      )
                    ],
                  )
                ),
                onTap: () {
                  print('execute motors');
                },
              ),
            ),
            // Second
            Container(
              width: 125,

              child: Column(
                children: <Widget>[
                  Expanded(
                    child: GestureDetector(
                      child: Container(
                        margin: EdgeInsets.only(left: 5, right: 5, bottom: 5),

                        decoration: BoxDecoration(
                          color: Colors.green,

                          borderRadius: BorderRadius.all(
                            Radius.circular(10)
                          )
                        ),


                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(
                              Icons.add,
                              color: Colors.white,                      
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Text(
                              'Classified',
                              style: TextStyle(
                                color: Colors.white
                              ),
                            )
                          ],
                        )
                      ),
                      onTap: () {
                        print('execute classified');
                      },
                    ),
                  ),
                  Expanded(
                    child: GestureDetector(
                      child: Container(                      
                        margin: EdgeInsets.only(left: 5, top: 5, right: 5),

                        decoration: BoxDecoration(
                          color: Colors.orange,

                          borderRadius: BorderRadius.all(
                            Radius.circular(10)
                          )
                        ),


                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(
                              Icons.add,
                              color: Colors.white,                      
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Text(
                              'Services',
                              style: TextStyle(
                                color: Colors.white
                              ),
                            )
                          ],
                        )
                      ),
                      onTap: () {
                        print('execute services');
                      },
                    ),
                  ),
                ],
              ),
            ),
            // Third
            Container(
              width: 125,

              child: Column(
                children: <Widget>[
                  Expanded(
                    child: GestureDetector(
                      child: Container(  
                        margin: EdgeInsets.only(left: 5, bottom: 5),                   

                        decoration: BoxDecoration(
                          color: Colors.blueAccent,

                          borderRadius: BorderRadius.all(
                            Radius.circular(10)
                          )
                        ),


                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(
                              Icons.add,
                              color: Colors.white,                      
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Text(
                              'Properties',
                              style: TextStyle(
                                color: Colors.white
                              ),
                            )
                          ],
                        )
                      ),
                      onTap: () {
                        print('execute properties');
                      },
                    ),
                  ),
                  Expanded(
                    child: GestureDetector(
                      child: Container(     
                        margin: EdgeInsets.only(left: 5, top: 5),

                        decoration: BoxDecoration(
                          color: Colors.orangeAccent,

                          borderRadius: BorderRadius.all(
                            Radius.circular(10)
                          )
                        ),


                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(
                              Icons.add,
                              color: Colors.white,                      
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            Text(
                              'Jobs',
                              style: TextStyle(
                                color: Colors.white
                              ),
                            )
                          ],
                        )
                      ),
                      onTap: () {
                        print('execute jobs');
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

这是结果:

希望这对你有帮助，杜比