如何将第一项放在开头，然后将列的第二项直接放在中心？

Question

我认为我没有看到一个简单的解决方案，但当我在第一个示例中将紫色分隔线作为第一项时，我希望紫色图标和文本与黑色图标处于相同的高度

这是我的紫色专栏的代码：

Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                  height: 4,
                  width: size.width * 0.22,
                  color: Colors.deepPurple,
                ),
                const Column(
                  children: [
                    Icon(
                      Icons.home,
                      color: Colors.deepPurple,
                    ),
                    Text(
                      'Strona główna',
                      style: TextStyle(
                          color: Colors.deepPurple
                      ),
                    )
                  ],
                ),
              ],
            ),

我尝试使用

Expanded

或

Spacer

但它对我不起作用。

Answer 1

我想你想创建一个导航栏，你可以这样做

首先创建类StatelessWidget navigationBar：

class navigationBar extends StatelessWidget {


final int selectedIndex;
  final Function(int) onItemTapped;

  const navigationBar({
    Key? key,
    required this.selectedIndex,
    required this.onItemTapped,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      width: 800,
      color: Color.fromARGB(255, 255, 255, 255),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          NavigationBarItem(
            icon: 'home',
            title: 'Home',
            index: 0,
            selectedIndex: selectedIndex,
            onTap: onItemTapped,
          ),
          NavigationBarItem(
            icon: 'search',
            title: 'Search',
            index: 1,
            selectedIndex: selectedIndex,
            onTap: onItemTapped,
          ),
          NavigationBarItem(
            icon: 'map',
            title: 'Plan',
            index: 2,
            selectedIndex: selectedIndex,
            onTap: onItemTapped,
          ),
          NavigationBarItem(
            icon: 'like',
            title: 'Favorite',
            index: 3,
            selectedIndex: selectedIndex,
            onTap: onItemTapped,
          ),
          NavigationBarItem(
            icon: 'user',
            title: 'Account',
            index: 4,
            selectedIndex: selectedIndex,
            onTap: onItemTapped,
          ),
        ],
      ),
    );
  }
}

创建

NavigationBarItem

类后：

class NavigationBarItem extends StatelessWidget {


 final String icon;
  final String title;
  final int index;
  final int selectedIndex;
  final Function(int) onTap;

  const NavigationBarItem({
    Key? key,
    required this.icon,
    required this.title,
    required this.index,
    required this.selectedIndex,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        onTap(index);
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.asset(
               index == selectedIndex
               ?'assets/images/${icon}Click.png':
               "assets/images/$icon.png",
            width: 20,height:20),
          SizedBox(height: 5),
          Text(
            title,
            style: GoogleFonts.cabin(
              textStyle: TextStyle(
                color: index == selectedIndex
                    ? Color.fromARGB(255, 0, 0, 0)
                    : Color.fromARGB(255, 189, 188, 188),
                fontSize: 12,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }
}