Question

我在 StackOver Flow 上发帖是因为我被困在 Flutter 应用程序的开发中。我是初学者，正在学习 Flutter 和 Dart，但我一直在学习一些基本的东西，这有点令人沮丧。

我想在移动应用程序的中间显示一个图像，下面有两个按钮。根据我单击的按钮，图像会发生变化。我正在尝试这样做来练习，但我被困在布局上。我可以显示两个按钮，但我无法定位上面的图像

import 'package:flutter/material.dart';

const appBarColor_primary = Color(0xFFEE0245);

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorScheme: ColorScheme.light()),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Am I rich ?'),
          backgroundColor: appBarColor_primary,
        ),
        body: Center(
            child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.network(
                'https://dictionary.cambridge.org/fr/images/thumb/diamon_noun_002_10599.jpg?version=5.0.158'),
            ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(appBarColor_primary),
              ),
              onPressed: () {},
              child: Text('Yes I am Rich !'),
            ),
            ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(appBarColor_primary),
              ),
              onPressed: () {},
              child: Text(
                'No, I am poor !',
              ),
            ),
          ],
        )));
  }
}

你知道我该怎么做吗？

提前感谢您的宝贵帮助

Answer 1

您需要一个 Column 来垂直放置小部件：

class MyHomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Am I rich ?'),
          backgroundColor: appBarColor_primary,
        ),
        body: Center(
            child: Column(
          children: [
            Image.network('https://dictionary.cambridge.org/fr/images/thumb/diamon_noun_002_10599.jpg?version=5.0.158'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(appBarColor_primary),
                  ),
                  onPressed: () {},
                  child: Text('Yes I am Rich !'),
                ),
                ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(appBarColor_primary),
                  ),
                  onPressed: () {},
                  child: Text(
                    'No, I am poor !',
                  ),
                ),
              ],
            ),
          ],
        )));
  }
}

在两个按钮上方添加图像的颤振布局问题

1 个答案: