首页 文章

带有图标和文本的颤振按钮看起来很奇怪

提问于
浏览 次
0

我正在尝试创建一个Flutter应用程序，其中包含一个带有文本和图标作为标签的按钮，该图标位于文本的右侧 . this post中描述的方法产生一个奇怪的按钮，似乎扩展到应用程序的宽度，请参阅此图像（链接，因为我不允许附加图像）：

Button becomes wide when adding a Row widget as child

我不清楚使用哪个布局小部件来调整文本图像按钮以将其格式化为纯文本按钮 .

用于生成上述示例的代码：

Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            new RaisedButton(
              onPressed: _incrementCounter,
              child: new Row(
                children: <Widget>[
                  new Text("Button with text and icon!"),
                  new Icon(Icons.lightbulb_outline)
                ],
              ),
            ),
            new RaisedButton(
              onPressed: _incrementCounter,
              child: new Text("Button with only text")
              ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}
flutter flutter-layout

2 回答

  • 0

    行属性 mainAxisSize: MainAxisSize.min 在这里诀窍 .

    @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Home'),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new RaisedButton(
              onPressed: () {},
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  new Text('Button with text and icon!'),
                  new Icon(Icons.lightbulb_outline),
                ],
              ),
            ),
            new RaisedButton(
              onPressed: () {},
              child: new Text('Button with only text'),
            )
          ],
        ),
      ),
    );
  }
    回复于
  • 2

    你可以简单地使用这个RaisedButton.icon

    简单用法：

    RaisedButton.icon(
   onPressed: () {},
   elevation: 2.0,
   shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(5.0),
   ),
   color: const Color(0xFFFFB822),
   icon: Icon(Icons.add_shopping_cart),
   label: Text("Add to Cart",
             style: TextStyle(
             fontWeight: FontWeight.w900,
    ),
  ),
)
    回复于

相关问题