无法将包含Flutter中的Material、TextButton和IconButton小部件的容器居中

vmdwslir  于 2023-06-30  发布在  Flutter
关注(0)|答案(1)|浏览(139)

我试着让我的按钮看起来像这样:

目前,它看起来像这样(我只是专注于实现一个图标和文本按钮,它们正确地并排在一起,然后我可以复制和粘贴其他按钮):

我试图中心对齐的个人资料和图标按钮,我用TextButton和IconButton做这些,但我还没有能够。我也试过把它们 Package 在一个中心部件中,但没有成功。我假设我组织我的代码和小部件错误,这是我的代码:

Container( // container holding the main setting buttons
            child: Padding(
              padding: const EdgeInsets.only(top: 20, bottom: 0, left: 30, right: 30),
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 2.5),
                  borderRadius: BorderRadius.circular(25)
                ),
                padding: const EdgeInsets.only(left: 7, top: 7, right: 10, bottom: 8),
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.center,
                      child: Material(
                        color: Colors.transparent,
                        child: Row(
                          children: [
                            IconButton( // TODO: CHANGE ICON TO EXACT FROM FIGMA
                              iconSize: 20,
                              padding: EdgeInsets.zero,
                              constraints: BoxConstraints(),
                              icon: const Icon(Icons.add_circle_outline),
                              onPressed: () {
                                // TODO: NO FUNCTIONALITY FOR BUTTON
                              },
                            ),
                            
                            TextButton(
                              
                              style: TextButton.styleFrom(
                                foregroundColor: Colors.black, // color of text
                                textStyle: const TextStyle(fontSize: 17, fontWeight: FontWeight.w500),
                              ),
                              onPressed: () {
                                
                              },
                              child: const Text("Privacy"), // TODO: CHANGE FONT
                            ),
                          ],
                        ),
                      ),
                    ),
                    
                    ElevatedButton(onPressed: () => {}, child: const Text("Terms of Service")),
                    ElevatedButton(onPressed: () => {}, child: const Text("Community Rules")),
                    ElevatedButton(onPressed: () => {}, child: const Text("Report a problem")),
                    ElevatedButton(onPressed: () => {}, child: const Text("Become a Pioneer")),
                    ElevatedButton(onPressed: () => {}, child: const Text("Log out")),
                    ElevatedButton(onPressed: () => {}, child: const Text("Manage account"))
                  ]
                ),
              ),
            ),
          ),
zbdgwd5y

zbdgwd5y1#

您可以用ListTile替换ElevatedButtons

  • 示例:* 删除
ElevatedButton(onPressed: () => {}, child: const Text("Terms of Service")),

然后加上

ListTile(onTap:(){},title:Text("Terms of Service"),leading: Icon(Icons.add))
ListTile(onTap:(){},title:Text("Community Rules" ),leading: Icon(Icons.add))

如果将ListTiles Package 在SizedBox上,则可以根据需要设置宽度。
但如果你只想让这些小部件居中:
那么列应该有
mainAxisAlignment:MainAxisAlignment.center
第一个按钮所在的行应该有:
mainAxisAlignment:MainAxisAlignment.center

相关问题