如何将符合 Material Design 标准的填充应用到我的 Flutter Scaffold？

Posted 2023-02-23

技术标签:

【中文标题】如何将符合 Material Design 标准的填充应用到我的 Flutter Scaffold？【英文标题】：How do I apply Material Design-compliant padding to my Flutter Scaffold? 【发布时间】：2017-05-30 11:44:38 【问题描述】：

我编写了一个使用 package:flutter/material.dart 的 Flutter 应用程序。在 ios 模拟器上运行应用程序如下所示。可以看到，一行中的组件之间是没有padding的，组件到达top、bottom、left和right都没有padding/margin/border。我的问题是：

应用符合材料的填充的推荐方法是什么，例如转换为和下拉按钮之间的标签组件间隙。我会将我的组件打包在一个容器中并在那里应用填充吗？

非常感谢您。

这是应用程序代码：

import 'package:flutter/material.dart';
import 'converter.dart';
import 'model.dart';

const _appName = 'Temperature Converter';

void main() 
  runApp(new MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      title: _appName,
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: _appName),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  final Model model = new Model();
  var _currentInput = const InputValue();

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(config.title),
      ),
      body: new Column(children: <Widget>[
        new Row(children: <Widget>[
          new Expanded(
              child: new Input(
                  hintText: 'Temperature',
                  value: _currentInput,
                  onChanged: (input) => _currentInput = input)),
          new DropdownButton(
              items: createUnit(),
              onChanged: (temperatureUnit newValue) 
                setState(() 
                  model.inUnit = newValue;
                );
              ,
              value: model.inUnit)
        ]),
        new Row(children: <Widget>[
          new Text("Convert to"),
          new DropdownButton(
              items: createUnit(),
              onChanged: (temperatureUnit newValue) 
                setState(() 
                  model.outUnit = newValue;
                );
              ,
              value: model.outUnit),
        ]),
        new FlatButton(
            child: new Text('Calculate'),
            onPressed: () 
              setState(() 
                double inTemp = stringToDouble(_currentInput.text);
                model.inTemperature = inTemp;
                model.calculateOutTemperature();
              );
            ),
        new Text(model.outTemperatureAsString)
      ]), // This trailing comma tells the Dart formatter to use
      // a style that looks nicer for build methods.
    );
  

  List<DropdownMenuItem> createUnit() 
    var l = new List<DropdownMenuItem<temperatureUnit>>();
    // degrees Celsius
    l.add(new DropdownMenuItem<temperatureUnit>(
        value: temperatureUnit.degreesCelsius,
        child: new Text(unitDegreesCelsius)));
    // degrees Fahrenheit
    l.add(new DropdownMenuItem<temperatureUnit>(
        value: temperatureUnit.degreesFahrenheit,
        child: new Text(unitDegreesFahrenheit)));
    // Kelvin
    l.add(new DropdownMenuItem<temperatureUnit>(
        value: temperatureUnit.kelvin, child: new Text(unitKelvin)));
    return l;

这个问题绝不是暗示 Flutter 遗漏了什么。我只想把它做好。 ;-)

【问题讨论】：

【参考方案1】：

一般来说，我建议使用Block 作为 Scaffold 的子级。它有一个可以设置的padding 值。

您也可以只使用Padding 小部件。

【讨论】：

【参考方案2】：

我只知道ButtonTheme 有一个填充值

ButtonTheme.of(context).padding

所以我认为目前最好的解决方案是拥有恒定值并使用 Container 来应用填充。

也许我错了，但我不知道有任何 Widget 会自动应用任何 Material 填充。

【讨论】：