文本從容器的頂部邊框被剪裁

我正在嘗試在容器邊框上添加標題，但文本從頂部邊框被剪裁。我該如何解決這個問題。

代碼 ：

Stack(
    children: <Widget>[
      Positioned(
        left: 50.0,
        top: -33.0,
        child: Container(
          //margin: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 10.0),
          padding: EdgeInsets.only(
            bottom: 10,
            left: 10,
            right: 10,
          ),
          child: Padding(
            padding: const EdgeInsets.all(25.0),
            child: const Text('QA Decision'),
          ),
          // color: Theme.of(context).,
        ),
      ),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(7.5),
            border: Border.all(),
          ),
          padding: EdgeInsets.all(10.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              RadioListTile<QaDecision>(
                title: Text(QaDecision.Accept.name),
                value: QaDecision.Accept,
                groupValue: _qaDecision,
                onChanged: qaDecisionCallback,
              ),
              RadioListTile<QaDecision>(
                title: Text(QaDecision.Reject.name),
                value: QaDecision.Reject,
                groupValue: _qaDecision,
                onChanged: qaDecisionCallback,
              ),
            ],
          ),
        ),
      ),
    ],
),

uj5u.com熱心網友回復：

我不明白你為什么使用堆疊而不是列。但是您在 Text Widget 上添加了很多填充。

1. 將整個腳手架主體包裹在 SafeArea 中以避免設備邊緣。

2. 不要將負值放在 Positioned 的頂部引數上。

3. 從文本中洗掉所有那些不必要的填充。

   Scaffold(
    appBar: AppBar(),
    body: SafeArea(
    child: Stack(
      children: [
        Positioned(
          left: 50.0,
          top: 2.0,
          child: const Text('QA Decision'),
        ),
       .................
   

uj5u.com熱心網友回復：

嘗試這個。

InputDecorator(
            decoration: InputDecoration(
              labelText: "QA Decision",
              labelStyle: TextStyle(color: Colors.black, fontSize: 20),
              border: InputBorder.none,
              enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 1.5, color: Colors.black),
                  borderRadius: BorderRadius.circular(7.5)),
            ),
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 10.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  RadioListTile<QaDecision>(
                    title: Text(QaDecision.Accept.name),
                    value: QaDecision.Accept,
                    groupValue: _qaDecision,
                    onChanged: qaDecisionCallback,
                  ),
                  RadioListTile<QaDecision>(
                    title: Text(QaDecision.Reject.name),
                    value: QaDecision.Reject,
                    groupValue: _qaDecision,
                    onChanged: qaDecisionCallback,
                  ),
                ],
              ),
            ),
          ),

uj5u.com熱心網友回復：

在您的Padding小部件中，您可以僅更改頂部的填充以將其放置在較低的位置：

...
child: Padding(
            padding: const EdgeInsets.only(top:40.0),
            child: const Text('QA Decision'),
          ),

結果：

標籤：扑

上一篇：如何在顫動中創建這種票形狀？

下一篇：如何設定計數器同時作業onLongPress和onTap？