如何调整领先属性内的图像大小？答案

【问题标题】：How to resize image inside of a leading property?如何调整领先属性内的图像大小？
【发布时间】：2019-07-21 20:34:19
【问题描述】：

我正在尝试在应用栏中的标题前添加一个徽标，但似乎图像只占用了前导属性的宽度和高度。

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  Widget build(context){
      return Scaffold(
        appBar: AppBar(
          title:Text('Hi, Andi Loshi'),
          backgroundColor: Color.fromRGBO(230, 1, 1,1),
          leading:  new Image.asset("assets/images/logo.png",
          fit:BoxFit.cover,
          height:20.00,
          width:20.00
          ),
        ),
        body: Text('Body will reside here')
      );
  }
}

【问题讨论】：

标签： image flutter

【解决方案1】：

@Mussa Kalokola，您可以将图像用填充物包裹在前面，使其更小。

我认为这是最简单的解决方案。

例如。

appBar: AppBar(
    title: Text(_getScreenTitle(context, _selected)),
    leading: const Padding(
      padding: EdgeInsets.all(16.0),
      child: ClipOval(
        child: Image(
          image: AssetImage('images/test.png'),
        ),
      ),
    ),
  ),

【讨论】：

【解决方案2】：

虽然您不能修改前导的大小，但您可以在应用栏的标题前添加图片，如下所示，标题请查看下面的代码。

import 'package:flutter/material.dart';

void main() => runApp(Home());

class Home extends StatelessWidget {
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Container(
            child: Row(
              children: [
                Image.asset(
                  "assets/images/logo.png",
                  fit: BoxFit.cover,
                ),
                SizedBox(
                  width: 10,
                ),
                Text('Hi, Andi Loshi')
              ],
            ),
          ),
          backgroundColor: Color.fromRGBO(230, 1, 1, 1),
        ),
        body: Text('Body will reside here'),
      ),
    );
  }
}

【讨论】：

我很高兴@MussaKalokola

【解决方案3】：

您可以将领先的小部件包装在 Center 小部件内，或在 AppBar 内设置 leadingWidth 属性。

示例：

appBar: AppBar(
    title: Text('Your Title'),
    //leadingWidth: 38.0,
    leading: Center(
        child: Image(
          image: AssetImage('images/test.png'),
        ),
  ),

【讨论】：

【解决方案4】：

AppBar 内的小部件大小有限。如果你想要一个自定义的，你可以从头开始实现它，这个article可以帮助你。

【讨论】：

【解决方案5】：

您可以在AppBar 中使用leadingWidth 属性。

class Home extends StatelessWidget {
Widget build(context){
  return Scaffold(
    appBar: AppBar(
      title:Text('Hi, Andi Loshi'),
      backgroundColor: Color.fromRGBO(230, 1, 1,1),
      leading:  new Image.asset("assets/images/logo.png",
      leadingWidth: 80,
      fit:BoxFit.cover,
      height:20.00,
      width:20.00
      ),
    ),
    body: Text('Body will reside here')
  );

} }

【讨论】：