Flutter：右溢位23個像素（“添加任務”按鈕）

所以基本上我正在為我的待辦事項串列應用程式制作一個“添加任務”按鈕，它顯示“右溢位 23 像素”

這是“添加任務”按鈕的“home_page.dart”代碼

_addTaskBar(){
  return Container(
   margin: const EdgeInsets.only(left:20, right:20, top:10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(DateFormat.yMMMMd().format(DateTime.now()),
                  style: subHeadingStyle,
                  ),
                  Text("Today",
                  style: headingStyle,
                  )
                ],
              ),
            MyButton(label: "  Add Task", onTap: ()=>null)
          ],
        ),
    );
}

這也是我的“添加任務”按鈕的“button.dart”代碼

 class MyButton extends StatelessWidget {
  final String label;
  final Function()? onTap;
  const MyButton({ Key? key, required this.label, required this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 120,
        height: 60,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: primaryClr
        ),
        child: Text(
          label,
          style: const TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

代碼的結果是 this enter image description here

我需要任何可以解決我的這個問題的人的幫助。謝謝

uj5u.com熱心網友回復：

您可以像這樣用 SizedBox 包裝您的 MyButton 小部件：

SizedBox(
height:70,
width:50,
child:MyButton(label: "  Add Task", onTap: ()=>null)
)

您還可以使用MediaQuery 類提供動態高度和寬度，您可以獲得有關當前設備尺寸以及用戶偏好的資訊，并相應地設計您的布局

uj5u.com熱心網友回復：

您在這里嘗試 MediaQuery.of(context)(height&width) 而不是硬參考的高度寬度，并嘗試使用靈活的小部件展開或包裝。

uj5u.com熱心網友回復：

好的，所以從您添加的代碼中，我為您創建了一個示例。

由于您沒有提供文本的樣式，但我已使用最大字體大小從右側溢位按鈕。

所以我為 MyButton 類使用了 Expanded 小部件，并洗掉了 AddTask 按鈕的恒定寬度和高度，檢查下面的代碼你會得到它。

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: _addTaskBar(),
      ),
    );
  }

  _addTaskBar() {
    return Container(
      margin: const EdgeInsets.only(left: 20, right: 20, top: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                DateFormat.yMMMMd().format(DateTime.now()),
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 32,
                ),
              ),
              const Text(
                "Today",
                style: const TextStyle(color: Colors.white),
              )
            ],
          ),
          Expanded(child: MyButton(label: "  Add Task", onTap: () => null))
        ],
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  final String label;
  final Function()? onTap;
  const MyButton({Key? key, required this.label, required this.onTap})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        GestureDetector(
          onTap: onTap,
          child: Container(
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.blue,
            ),
            child: Center(
              child: Text(
                label,
                style: const TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

讓我知道它是否有效。

uj5u.com熱心網友回復：

此錯誤是因為您給出的尺寸溢位意味著它不適合螢屏。嘗試使用列和行的引數（mainaxisalignment，crossaxisalignment）使小部件適合每個螢屏。

標籤：扑 镖 视觉工作室代码 按钮

上一篇：如何通過偏好以編程方式交換Kotlin中的2個按鈕位置？

下一篇：我如何反應以將按鈕值輸入輸入？