Flutter -如何将按钮与行的右侧对齐

gcxthw6b 于 2023-03-19 发布在 Flutter

关注(0)|答案(5)|浏览(288)

我在将添加按钮对齐到行的右侧时遇到问题。我尝试使用SizedBox、MainAxisAlignment并增加按钮和容器的宽度，但没有效果。它移动到左侧，并减少了TextField的宽度。我猜这是因为我使用Flexible类创建具有TextField

的行

Widget buildParty() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(5)),
          border: Border.all(width: 0.7, color: Colors.black38),
        ),
        child: Row(
          children: [
            Container(
              alignment: Alignment.center,
              width: 30,
              height: 60,
              child: Text('$_prtnum'),
            ),
            Flexible(
              child: TextField(
                  decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Participant')
              ),
            ),
            ElevatedButton(onPressed: () {
              setState(() {
                if (_prtadd > 1)
                  --_prtadd;
              });
            }, child: Text('-', style: TextStyle(color: Colors.white),), style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.zero
                ),
                alignment: Alignment.center,
                backgroundColor: Colors.green[700],
                minimumSize: Size(34, 10),
                padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
            ),),
            Container(
              alignment: Alignment.center,
              width: 35,
              child: Text('$_prtadd'),
            ),
            ElevatedButton(onPressed: () {
              setState(() {
                if (_prtadd < 8)
                  ++_prtadd;
              });
            }, child: Text('+', style: TextStyle(color: Colors.white),), style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(topRight: Radius.circular(5), bottomRight: Radius.circular(5.0))
                ),
                alignment: Alignment.center,
                backgroundColor: Colors.green[700],
                minimumSize: Size(34, 10),
                padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
            ),)
          ],
        ),
      ),
    );
  }

flutter

来源：https://stackoverflow.com/questions/75741024/flutter-how-to-align-button-to-right-side-of-the-row

5条答案

按热度按时间

qlvxas9a1#

您需要在右侧按钮小工具的样式中使用此属性：
tapTargetSize: MaterialTapTargetSize.shrinkWrap

style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                    topRight: Radius.circular(5),
                    bottomRight: Radius.circular(5.0))),
            alignment: Alignment.center,
            backgroundColor: Colors.green[700],
            minimumSize: Size(34, 10),
            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
            padding: EdgeInsets.symmetric(
              vertical: 22,
              horizontal: 0,
            ),
          )

希望对你有帮助

赞(0）回复(0）举报 2023-03-19

nbnkbykc2#

用Expanded Package Flexible，因为它将获得剩余空间

赞(0）回复(0）举报 2023-03-19

iyfamqjs3#

您应该尝试使用flutter中的Align类来定位小部件。

Container(
     
      child: Align(
        alignment: Alignment.centerRight,
),)

您也可以将按钮与右下角和右上角对齐，但将centerRight替换为bottomRight或topRight。
另一种方法是设置对齐方式：

Align(
  alignment: Alignment(0.2, 0.6),

如需了解更多信息，请访问：
https://api.flutter.dev/flutter/widgets/Align-class.html

赞(0）回复(0）举报 2023-03-19

y53ybaqx4#

@Amil我已经更新了你的代码。请使用下面的代码，你是好去：-

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(5)),
      border: Border.all(width: 0.7, color: Colors.black38),
    ),
    child: Row(
      children: [
        Container(
          alignment: Alignment.center,
          width: 30,
          height: 60,
          child: Text('$_prtnum'),
        ),
        Flexible(
          child: TextField(
              decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Participant')
          ),
        ),
        ElevatedButton(onPressed: () {
          setState(() {
            if (_prtadd > 1)
              --_prtadd;
          });
        }, child: Text('-', style: TextStyle(color: Colors.white),), style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.zero
            ),
            alignment: Alignment.center,
            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
            backgroundColor: Colors.green[700],
            minimumSize: Size(34, 10),
            padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
        ),),
        Container(
          alignment: Alignment.center,
          width: 35,
          child: Text('$_prtadd'),
        ),
        ElevatedButton(onPressed: () {
          setState(() {
            if (_prtadd < 8)
              ++_prtadd;
          });
        }, child: Text('+', style: TextStyle(color: Colors.white),), style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(topRight: Radius.circular(5), bottomRight: Radius.circular(5.0))
            ),
            tapTargetSize: MaterialTapTargetSize.shrinkWrap,

            alignment: Alignment.center,
            backgroundColor: Colors.green[700],
            minimumSize: Size(34, 10),
            padding: EdgeInsets.symmetric(vertical: 22, horizontal: 5)
        ),)
      ],
    ),
  ),
)

赞(0）回复(0）举报 2023-03-19

voase2hg5#

尝试以下代码并从第二个ElevatedButton中删除水平填充
职能：

int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

宽度：

Container(
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(Radius.circular(5)),
            border: Border.all(width: 0.7, color: Colors.black38),
          ),
          margin: const EdgeInsets.symmetric(
            horizontal: 15,
          ),
          padding:const EdgeInsets.only(left: 10),
          child: Row(
            children: [
              Text(
                '$_counter',
              ),
              const SizedBox(
                width: 20,
              ),
              const Flexible(
                child: TextField(
                  decoration: InputDecoration(
                      border: InputBorder.none, hintText: 'Participant'),
                ),
              ),
              ElevatedButton(
                onPressed: _incrementCounter,
                style: ElevatedButton.styleFrom(
                    shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.zero),
                    alignment: Alignment.center,
                    backgroundColor: Colors.green[700],
                    minimumSize: const Size(34, 10),
                    padding: const EdgeInsets.symmetric(
                        vertical: 22, horizontal: 5)),
                child: const Text(
                  '-',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              Container(
                alignment: Alignment.center,
                width: 35,
                child: Text(
                  '$_counter',
                ),
              ),
              ElevatedButton(
                onPressed: _decrementCounter,
                style: ElevatedButton.styleFrom(
                  shape: const RoundedRectangleBorder(
                      borderRadius: BorderRadius.only(
                          topRight: Radius.circular(5),
                          bottomRight: Radius.circular(5.0))),
                  alignment: Alignment.center,
                  backgroundColor: Colors.green[700],
                  minimumSize: const Size(34, 10),
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  padding: const EdgeInsets.symmetric(
                    vertical: 22,

                  ),
                ),
                child: const Text(
                  '+',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ],
          ),
        ),

结果-〉x1c 0d1x

赞(0）回复(0）举报 2023-03-19

我来回答

Flutter -如何将按钮与行的右侧对齐

5条答案

相关问题

热门标签

最新问答