如何將按鈕放在影像下方？撲

大家好，我是 Flutter 的新手，我需要有關我的應用程式的幫助，以便在我的應用程式主選單中的影像下方放置一個按鈕，

到目前為止，這是我基于https://docs.flutter.dev/development/ui/layout/tutorial構建的代碼

import 'package:flutter/material.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:get/get_navigation/get_navigation.dart';
import 'Reminder/ui/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';

void main() {
  // debugPaintSizeEnabled = true;
  runApp(const HomePage());
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Medicine Reminder App'),
        ),
        body: Stack(
          children: [
            Image.asset(
              'images/MenuImg.jpg',
              width: 600,
              height: 200,
              fit: BoxFit.cover,
            ),
          ],
        ),
      ),
    );
  }
}

我想做的是放一個按鈕導航到不同的頁面。

這是我想放置按鈕的小插圖

uj5u.com熱心網友回復：

您可以用一個包裹影像小部件Column，以設定垂直排列的小部件，我這樣做是為了 Row 顯示帶有 a 的按鈕MainAxisAlignment.spaceBetween以隔開它們

試試這個：

    import 'package:flutter/material.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:get/get_navigation/get_navigation.dart';
import 'Reminder/ui/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';

void main() {
  // debugPaintSizeEnabled = true;
  runApp(const HomePage());
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Medicine Reminder App'),
        ),
        body: Column(
          children: [
            Stack(
              children: [
                Image.asset(
                  'images/MenuImg.jpg',
                  width: 600,
                  height: 200,
                  fit: BoxFit.cover,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ElevatedButton(
                  child: Text('btn 1'),
                  onPressed: () {},
                ),
                ElevatedButton(
                  child: Text('btn 2'),
                  onPressed: () {},
                ),
                ElevatedButton(
                  child: Text('btn 3'),
                  onPressed: () {},
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

您需要在小部件Column的 body 引數中使用小Scaffold部件，才能在螢屏的列視圖中添加多個小部件。

您可以在此zaap.run 鏈接中找到一個完整的示例。

您還可以在此處找到沒有任何預覽的代碼：

import 'package:flutter/material.dart';

void main() {
  // debugPaintSizeEnabled = true;
  runApp(const HomePage());
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Medicine Reminder App'),
        ),
        body: Column(children: [
          Stack(
            children: [
              Image.network(
                'https://i.imgur.com/9ZOaH1m.jpeg',
                width: 600,
                height: 200,
                fit: BoxFit.cover,
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              TextButton(
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.black)),
                onPressed: () {},
                child: Text("Button1"),
              ),
              TextButton(
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.black)),
                onPressed: () {},
                child: Text("Button2"),
              ),
              TextButton(
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.black)),
                onPressed: () {},
                child: Text("Button3"),
              ),
            ],
          )
        ]),
      ),
    );
  }
}

uj5u.com熱心網友回復：

只需更改Stackwith Column 或 Listiw

body: Column(
 children: [
  Image.asset(
    'images/MenuImg.jpg',
    width: 600,
    height: 200,
    fit: BoxFit.cover,
  ),
  /// your button is here:
  Row(
  children:[
  ElevetedButton(),// btn 1
  ElevetedButton(),// btn 2
  ... 
 ],
),

標籤：安卓扑镖移动的颤振布局

上一篇：沒有從Python中的SQLServer獲取預期資料

下一篇：錯誤：型別不匹配：推斷型別是Map<String,String>？但是在Flutter/Kotlin中使用MethodChannel時預期Map<String,String>