Question

我有一个带有两个图标的底部应用程序栏。我想在图标下方添加文本，所以我想将iconbutton包裹在一栏中。当我这样做时，它将导致底部的应用栏占据整个屏幕。我怎样才能解决这个问题？这是导致问题的代码。它没有列就按预期工作。



module.exports = {
    devtool: 'source-map',
    entry: "./app.tsx",
    mode: "development",
    output: {
        filename: "./app-bundle.js"
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx'],
       
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
                  

                
            }, 
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }]
            },


            

           
        ]

       

    },
    
    
}

在添加列之前。

这是列对屏幕的作用。

Answer 1

将Column的大小更改为MainAxisSize.min就可以了

Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          icon: Icon(Icons.note_add),
          color: Colors.white,
          // tooltip: 'Add Note',
          onPressed: () {},
        ),
        Text('Add Note'),
      ],
    ),
    Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          icon: Icon(Icons.image),
          color: Colors.white,
          // tooltip: 'Open Image Clue',
          onPressed: () {},
        ),
        Text('Open Image Clue'),
      ],
    ),

还有用于制作BottomNavigationBarItem的预构建小部件，您可以像使用它

BottomNavigationBarItem(icon:IconButton(
          icon: Icon(Icons.image),
          color: Colors.white,
          // tooltip: 'Open Image Clue',
          onPressed: () {},
        ),label:"Open Image Clue",
)

建议使用此功能，因为它具有一些文本缩放实现

将列添加到底部应用程序栏使其全屏显示

1 个答案: