Question

我正在尝试创建一个自定义窗口小部件，该窗口小部件是包含3个iconButtons的圆角矩形，用于导航。但是据我所知，iconButtons不能在材质小部件之外使用，而且我不知道如何将它们包装在不会弄乱用户界面的小部件中。

仅一个带有iconButtons的容器会引发“找不到材料小部件，iconButton小部件需要材料小部件”
试图包裹一个材料小部件，我得到了位置参数，弄乱了我的UI
我尝试将我的容器包装在其他小部件中无济于事。

这是我的一段代码，只是容器中的一个图标。在关闭窗口小部件之前，代码将使用不同的图标和onPressed重复两次。我真的希望我的UI能够查看我的计划，并使这些按钮正常工作。

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50.0,
      width: 200.0,
     // color: Colors.grey[800],
        decoration: new BoxDecoration(
          color: Colors.grey[800],
          borderRadius: new BorderRadius.all( Radius.circular(50.0)),
        ),
      child: Stack(
        children: <Widget>[
          Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                new Container(
                  child: Column(
                  mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        IconButton(
                          icon: Icon(Icons.menu),
                          color: Colors.white,
                          onPressed: () {
                            print('test');
                          },
                        ) // IconButton
                      ], // <Widget>[]
                  ) //Column
                ), // Container

Answer 1

将您的代码包装在Scaffold中，它将起作用。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Container(
      height: 50.0,
      width: 200.0,
      decoration: BoxDecoration(
        color: Colors.grey[800],
        borderRadius: new BorderRadius.all(Radius.circular(50.0)),
      ),
      child: Stack(
        children: [
          Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      IconButton(
                        icon: Icon(Icons.menu),
                        color: Colors.white,
                        onPressed: () {
                          print('test');
                        },
                      )
                    ],
                  ),
                )
              ],
            ),
          )
        ],
      ),
    ),
  ); // IconButton ], // [] ) //Column ), // Container
}

如何使用三个独立按钮创建自定义容器

1 个答案: