首页 > 解决方案 > 如何在图像下显示 2 个按钮的同一行?

问题描述

我想在图像下的同一行中显示按钮。这是我的代码,它可以显示按钮但不能显示同一行。

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image(
              image: AssetImage('images/111.jpg'),
            ),
            RaisedButton(
              onPressed: () {},
              child: Text('aaa'),
            ),
            RaisedButton(
              onPressed: () {},
              child: Text('bbb'),
            ),
          ],
        ),
      ),
    );
  }
}

我将代码更改为 child: Row 像这样。

 body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image(
          image: AssetImage('images/111.jpg'),
        ),
        

      ],
    ),

    child: Row(
        RaisedButton(
          onPressed: () {},
          child: Text('aaa'),
        ),
        RaisedButton(
          onPressed: () {},
          child: Text('bbb'),
        ),

    ),
  ),

它的显示错误子已经指定。如何在图像下显示 2 个按钮的同一行?

标签: flutterflutter-layout

解决方案


  1. 您不能在中心下有两个孩子
  2. Row 下的小部件需要子级。

尝试

@override
  Widget build(BuildContext context) {
    return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image(
          image: AssetImage('images/111.jpg'),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
      children : [
        
        RaisedButton(
          onPressed: () {},
          child: Text('aaa'),
        ),
        RaisedButton(
          onPressed: () {},
          child: Text('bbb'),
        ),
        ]
          

    )
        

      ],
    

    
  )
  );}

推荐阅读