【问题标题】:how to change the shape of my elevatedbutton如何改变我的高架按钮的形状
【发布时间】:2021-06-12 23:50:51
【问题描述】:
 
import 'package:flutter/material.dart';

class SignInPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Tracker'),
        elevation: 5.0,
      ),
      body: _buildContent(),
      backgroundColor: Colors.amber[50],
    );
  }

  Widget _buildContent() {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Text(
            'Sing in',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 32.0,
              fontWeight: FontWeight.w600,
            ),
          ),
          SizedBox(height: 8.0),
          ElevatedButton(
            child: Text('Sing in with google'),
            onPressed: () {},
            style: ElevatedButton.styleFrom(
                primary: Colors.purple[200],
                onPrimary: Colors.black87,
                elevation: 6.0,
                shadowColor: Colors.yellow[200],
          ),
        ],
      ),
    );
  }
}

1_ 在这种情况下,我不知道如何更改按钮的形状 我在最后一个正方形的末尾显然有一个错误],第 41 行。请帮我修复它 提前感谢您的帮助。

【问题讨论】:

标签: flutter dart


【解决方案1】:

您可以将 Container 用作 Button 的子级或执行以下操作:

ElevatedButton.styleFrom(shape: new RoundedRectangleBorder(
           borderRadius: new BorderRadius.circular(30.0),
           ),),
           child: Text(' Elevated Button'))

【讨论】:

    【解决方案2】:

    您可以使用以下方式:

    在提升按钮内,

    style: ButtonStyle(
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(18.0),
          side: BorderSide(color: Colors.red)
        )
      )
    )
    

    在这里你可以使用borderRadius 属性来获得不同的形状。

    【讨论】:

      【解决方案3】:

      使 ElevatedButton 的子级成为 Container 小部件。

      然后您可以使用可用于容器小部件的 shape 属性。

      文本小部件可以成为容器小部件的子部件。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-12-28
        • 2011-02-19
        • 1970-01-01
        • 1970-01-01
        • 2021-06-10
        • 2022-12-17
        相关资源
        最近更新 更多