如何创建一个内部有三个单独按钮的自定义容器

问题描述 投票:0回答:1

我正在尝试创建一个自定义小部件,它是一个包含3个iconButtons的圆角矩形,用于导航。但是,就我所见,iconButtons不能在材质小部件之外使用,我不知道如何将它们包装在不会弄乱我的UI的小部件中。

  1. 只是一个带有iconButtons的容器抛出“找不到任何材料小部件,iconButton小部件需要材料小部件”
  2. 试图用一个材料小部件包装,我得到位置参数,弄乱我的UI
  3. 我试过在其他小部件包装我的容器无济于事。

这是我的一段代码,只是容器中的一个图标。在关闭窗口小部件之前,代码会以不同的图标和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
dart flutter flutter-layout
1个回答
0
投票

将您的代码包装在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
}
© www.soinside.com 2019 - 2024. All rights reserved.