Flutter —— 基础组件

  |   0 评论   |   0 浏览

Container

一个拥有绘制、定位、调整大小的widget。

文档地址

https://api.flutter.dev/flutter/widgets/Container-class.html

布局行为

  • 如果Container 没有子部件、没有高度、没有宽度、没有约束,并且父部件提供了不受限制的约束,那么Container 就会尽量减小大小。
  • 如果Container 没有子部件,也没有对齐方式,但是提供了宽度、高度或约束,那么在这些约束和父组件的约束组合的情况下,Container 会尝试尽可能小。
  • 如果Container 没有子部件、没有高度、没有宽度、没有约束和对齐,但是父部件提供了有边界的约束,那么Container 将展开以适应父部件提供的约束。
  • 如果Container 具有对齐方式,并且父组件提供了不受限制的约束,那么Container将尝试围绕组件调整自身大小。
  • 如果Container 有一个对齐方式,而父组件提供了有限制的约束,那么Container 将尝试展开以适应父组件,然后根据对齐方式将子组件定位在自己内部。
  • 否则,Container 有一个子部件,但没有高度、宽度、约束和对齐方式,容器将约束从父部件传递给子部件,并将自身大小与子部件匹配

例子

Center(
  child: Container(
    margin: const EdgeInsets.all(10.0),
    color: Colors.amber[600],
    width: 48.0,
    height: 48.0,
  ),
)

image.png

Container(
  constraints: BoxConstraints.expand(
    height: Theme.of(context).textTheme.headline4!.fontSize! * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.blue[600],
  alignment: Alignment.center,
  child: Text('Hello World',
    style: Theme.of(context)
        .textTheme
        .headline4!
        .copyWith(color: Colors.white)),
  transform: Matrix4.rotationZ(0.1),
)

image.png

Row

在水平方向上排列子widget 的列表

例子

Row(
  children: const <Widget>[
    Expanded(
      child: Text('Deliver features faster', textAlign: TextAlign.center),
    ),
    Expanded(
      child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
    ),
    Expanded(
      child: FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: FlutterLogo(),
      ),
    ),
  ],
)

image.png

Column

在垂直方向上排列子widget 的列表

例子

Column(
  children: const <Widget>[
    Text('Deliver features faster'),
    Text('Craft beautiful UIs'),
    Expanded(
      child: FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: FlutterLogo(),
      ),
    ),
  ],
)

image.png

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    const Text('We move under cover and we move as one'),
    const Text('Through the night, we have one shot to live another day'),
    const Text('We cannot let a stray gunshot give us away'),
    const Text('We will fight up close, seize the moment and stay in it'),
    const Text('It’s either that or meet the business end of a bayonet'),
    const Text('The code word is ‘Rochambeau,’ dig me?'),
    Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),
  ],
)

image.png

Image

构造方法

为指定图片的各种方式提供了几种构造函数:

  • new Image, 用于从 ImageProvider 获取图像
  • new Image.asset, 使用key 从 AssetBundle 获取图像
  • new Image.network, 从 URL 中获取图像
  • new Image.file, 从文件中获取图像
  • new Image.memory, 从 Uint8List 中获取图像。

支持的图像格式包括: JPEG、PNG、gif、gif动画、webP、webP动画、BMP 和 WBMP。

自动执行像素密度感知资源分辨率的步骤,指定使用 AssetImage 创建图片,并确保 Image 组件之前存在 MaterialApp、WidgetsApp、MediaQuery

Text

单一格式的文本

文本小部件以单一样式显示文本字符串。字符串可能会跨多行中断,也可能全部显示在同一行上,具体取决于布局约束。

Style 参数是可选的,如果省略,文本将使用最接近的封闭 DefaultTextStyle 中的样式。如果给定样式的TextStyle.Inherit 属性为 true(默认值),则给定样式将与最接近的封闭DefaultTextStyle 合并。此合并行为非常有用,例如,在使用默认字体系列和大小时 将文本设置为粗体。

例子

Text(
  'Hello, $_name! How are you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: const TextStyle(fontWeight: FontWeight.bold),
)

image.png

const Text.rich(
  TextSpan(
    text: 'Hello', // default text style
    children: <TextSpan>[
      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

image.png

Icon

一个 Material Design 图标

使用图标时必须有环境方向性小工具。通常,这是由 WidgetsApp 或 MaterialApp 自动引入的。

例子

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: const <Widget>[
    Icon(
      Icons.favorite,
      color: Colors.pink,
      size: 24.0,
      semanticLabel: 'Text to announce in accessibility modes',
    ),
    Icon(
      Icons.audiotrack,
      color: Colors.green,
      size: 30.0,
    ),
    Icon(
      Icons.beach_access,
      color: Colors.blue,
      size: 36.0,
    ),
  ],
)

image.png

ElevatedButton

Material Design 中的 Button ,一个凸起的材质矩形按钮。

例子

/// Flutter code sample for ElevatedButton

// This sample produces an enabled and a disabled ElevatedButton.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    final ButtonStyle style =
        ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20));

    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ElevatedButton(
            style: style,
            onPressed: null,
            child: const Text('Disabled'),
          ),
          const SizedBox(height: 30),
          ElevatedButton(
            style: style,
            onPressed: () {},
            child: const Text('Enabled'),
          ),
        ],
      ),
    );
  }
}

image.png

Scaffold

Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部sheet 的API。

实现了基本的组件设计可视化布局结构。

该类提供了用于显示抽屉和底页的API。

要显示持久的底部工作表,请通过Scaffold.of 获取当前BuildContext的ScaffoldState,并使用 ScaffoldState.showButtonSheet 函数。

/// Flutter code sample for Scaffold

// This example shows a [Scaffold] with a [body] and [FloatingActionButton].
// The [body] is a [Text] placed in a [Center] in order to center the text
// within the [Scaffold]. The [FloatingActionButton] is connected to a
// callback that increments a counter.
//
// ![The Scaffold has a white background with a blue AppBar at the top. A blue FloatingActionButton is positioned at the bottom right corner of the Scaffold.](https://flutter.github.io/assets-for-api-docs/assets/material/scaffold.png)

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: Center(child: Text('You have pressed the button $_count times.')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
    );
  }
}

image.png

Appbar


标题:Flutter —— 基础组件
作者:zh847707713
地址:http://lovehao.cn/articles/2021/10/25/1635145146046.html