如何在背景光中设置背景图像?

问题描述 投票:0回答:2

我最近开始学习抖动,我想添加背景图像,并在上面添加两个扁平按钮,但是我无法做到,我在代码中添加了背景图像,但是我没有用不明白问题所在。有人可以帮我吗?

    void main() {
      return runApp(
        MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              title: Text('Ani & genny',
                  style: TextStyle(
                    fontFamily: 'Pacifico',
                    color: Colors.white,
                  )),
              backgroundColor: Colors.red,
            ),
            body: MyApp(),
          ),
        ),
      );
    }

    class MyApp extends StatelessWidget {
      void navigateToPage() {
        print('Button pressed!!!!');
      }

      @override
      Widget build(BuildContext context) {
        return Center(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 50,
              ),
              Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                image: AssetImage("images/Ani.png"),
                fit: BoxFit.cover

                ),
                ),

              ),
              FlatButton(
                  child: Image.asset(
                    'images/li.png',
                    height: 120,
                    width: 120,
                  ),
                  onPressed: () {
                    navigateToPage();
                  }),
                ),
        ],
      ),
    );
  }
}
flutter flutter-container flutter-scaffold
2个回答
0
投票

这里是在图像上放置按钮的示例代码。您可以使用“定位”小部件将其放置在所需的任何位置。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
           Image.network(
              'https://picsum.photos/250?image=9',
           ),
           FlatButton(
              child: Text("Submit"),
              onPressed: () {
                  navigateToPage();
               }),
        ],
     ),
    );
  }
}

您可以在代码笔上运行此代码here


-1
投票

FlatButton没有显示,因为您没有给Container一个heightwidth。通过提供您的Container高度和宽度进行修复。检查以下代码:

Center(
      child: Column(
        children: <Widget>[
          SizedBox(
            height: 50,
          ),
          Container(
            // define your desired height here
            height: 50,
            // define your desired width here
            width: 120,
            decoration: BoxDecoration(
              color: Colors.white,
              image: DecorationImage(
                image: AssetImage("images/Ani.png"),
                fit: BoxFit.cover,
              ),
            ),
          ),
          FlatButton(
              child: Image.asset(
                'images/li.png',
                height: 120,
                width: 120,
              ),
              onPressed: () {
                navigateToPage();
              }),
        ],
      ),
    );

我希望这会有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.