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,
              ),

            ],
          ),
        ]),

但是，我脚本的结果看起来像这样。

然后我尝试对SizeBox.expand使用FlatButton.icon，但它给我抛出了错误

这是错误

I / flutter（5643）：渲染库引起的异常   ╞═════════════════════════════════════════════════ ════════我/颤振（   5643）：在performLayout（）期间引发了以下断言：   I / flutter（5643）：BoxConstraints强制无限宽度，   无限的高度。 I / flutter（5643）：这些无效约束是   由提供给RenderSemanticsAnnotations的layout（）函数   I / flutter（5643）：以下函数，可能计算了   有问题的无效约束：I / flutter（5643）：
  RenderConstrainedBox.performLayout   （package：flutter / src / rendering / proxy_box.dart：259：13）I / flutter（   5643）：令人讨厌的约束是：I / flutter（5643）：
  BoxConstraints（最大）

任何帮助将不胜感激

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');
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

这是结果：

希望这对您有帮助，Doobie

Answer 2

也可以将 ElevatedButton 与 Icon 作为子元素一起使用

如何展开图标按钮？

2 个答案: