如何在底部导航中换行

安吉特

我正在尝试构建一个 Flutter 应用程序,我想在其中使用底部导航栏。但是在项目长度更长的底部导航项目上,文本不会换行。我想将文本换行到下一行。

以下是正在发生的事情的图像:

在此处输入图片说明

以下是代码:

class HomeScreen extends StatefulWidget {
@override
  _HomeScreenState createState() => _HomeScreenState(imageurl, name, email);
}

class _HomeScreenState extends State<HomeScreen> {
@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
            // sets the background color of the `BottomNavigationBar`
            canvasColor: Colors.white,
            // sets the active color of the `BottomNavigationBar` if `Brightness` is light
            primaryColor: Colors.red,
            textTheme: Theme.of(context)
                .textTheme
                .copyWith(caption: new TextStyle(color: Colors.yellow))),
        child: SizedBox(
          height: 90,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              BottomNavigationBar(
                selectedItemColor: Colors.orange,
                type: BottomNavigationBarType.fixed,
                unselectedFontSize: 12,
                elevation: 2,
                currentIndex: 2, // this will be set when a new tab is tapped
                items: [
                  BottomNavigationBarItem(
                    icon: new Icon(
                      Icons.home_outlined,
                      color: Colors.black,
                    ),
                    title: Flexible(
                      child: new Text(
                        'Home',
                        style: TextStyle(
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                  BottomNavigationBarItem(
                    icon: new Icon(
                      Icons.star_border,
                      color: Colors.black,
                    ),
                    title: Flexible(
                      child: new Text(
                        ‘Decideit who,
                        style: TextStyle(
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(
                      Icons.location_city,
                      //color: Colors.black,
                    ),
                    title: Flexible(
                      child: Text(
                        'Post Question',
                        style: TextStyle(
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Icons.people_outline,
                        color: Colors.black,
                      ),
                      title: Flexible(
                        child: Text(
                          'Communities',
                          style: TextStyle(
                            color: Colors.black,
                          ),
                        ),
                      )),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Icons.person_outline,
                        color: Colors.black,
                      ),
                      title: Flexible(
                        child: Text(
                          'Profile',
                          style: TextStyle(
                            color: Colors.black,
                          ),
                        ),
                      ))
                ],
              ),
            ],
          ),
        ),
      ),
);
}
}

有人可以帮助我如何在下一行中显示 ... 文本吗?

塔哈20

我想你可以将你的文本小部件包装在一个像SizedBoxor的元素中Expaned然后做类似的事情:

BottomNavigationBarItem(
                  icon: Icon(
                    Icons.people_outline,
                    color: Colors.black,
                  ),
                  title: Expanded(
                    child: Text(
                      'Communities',
                      maxLines: 4 // however many lines you would want as a maximum
                      style: TextStyle(
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),

 BottomNavigationBarItem(
                  icon: Icon(
                    Icons.people_outline,
                    color: Colors.black,
                  ),
                  title: SizedBox(
                   height: 80
                    child: Text(
                      'Communities',
                      maxLines: 4 // however many lines you would want as a maximum
                      style: TextStyle(
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在我的底部导航栏中添加导航

compose 中的底部导航,如何在 Scoffold/NavGraph 之外导航

如何在片段中隐藏底部导航栏

如何在Twitter Bootstrap中删除导航栏底部填充

如何在 React Native 中显示底部导航上方的组件?

如何在颤动的底部导航栏中应用高程?

如何在Android中删除底部导航视图的图标动画

如何在Android中为底部导航设置全角

如何在Flutter中隐藏android的底部导航栏

如何在某些片段中隐藏底部导航栏?

Flutter - 如何在底部导航栏中制作圆形按钮

如何在Flutter中实现底部导航抽屉

如何在底部导航android中更改文本的大小

如何在底部导航栏中添加浮动图标?

如何在底部导航栏中添加一行

如何在android studio中设置底部导航可点击

Flutter 如何在特定屏幕中隐藏底部导航栏?

我如何在颤动中实现这个底部导航栏

如何在SwiftUI导航按钮中自动换行?

如何在底部标签导航器的反应导航中卸载不活动的屏幕?

如何在同一活动中为底部导航和导航抽屉创建侦听器?

如何在底部设置此导航栏?

如何从底部导航中删除标题

如何在 useEffect 中调用 useNavigate?- 用于 Ant Design 中的底部导航 - 移动

颤振问题:如何在脚手架的底部导航栏中设置列?

如何在底部导航栏(颤振)中删除容器的背景颜色?

如何在 React Native 中自定义材质底部选项卡导航器?

如何在Flutter中拆分底部导航栏项目的边距?

如何在悬停时间的导航列表中从左到右淡入/动画底部边框?