Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities
This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money
Everything is a Widget
Inside Flutter, everything is a Widget. Widgets are the most basic components. All classes return widgets. All view components in iOS, including UILabel, UIButton, UITextField, UIImageView and UIView, are widgets in Flutter. Even the UIViewController, UINavigationController, UITabbarController in iOS, the Activity in Android, and the Flutter are widgets. In summary, everything we see is a Widget.
The official widgets
Introducing the official Widgets is essentially introducing the official UI components. All subsequent custom components are based on these base component combinations. Writing Flutter must be familiar with these components, just like memorizing UIView, UILabel, and UIButton. Of course, the basic components of Flutter are not difficult to understand. Just write and look at the view rendering.
Here’s a Github projectflutter-study”, introduces a lot of widgets. It’s useful to refer back to them when I’m not familiar with them at the beginning.
Text
Text can be used to create styled Text within an application.
Text('You have pushed the button this many times:')
Copy the code
Row, Column
Row and Column are the most common and basic widgets, and almost all final views are built from these. Row stands for horizontal arrangement, Column stands for vertical arrangement, these two components should be familiar to those who have written front-end. Because it’s based on the Web’s Flexbox layout model.
Sample code:
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter'.style: Theme.of(context).textTheme.headline4,
),
Row(children: [Text('Horizontal zero'.), Text('Horizontal 1')],)],),Copy the code
Container
Container can be used to create a visible rectangle element. Of course, it can also be decorated with box decorations, such as backgrounds, borders, or shadows. Container also allows you to set margins, inner margins, and size constraints. Usually wrap some other components, and you need to have a background color or shadow.
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Container(color: Colors.blue, width: 100.height: 100,),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment'.child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
Copy the code
Stack
A Stack is an overlay layout, which should not be confused with iOS UIStackView. Haha, a Stack is a view overlay on the Z axis, which can be used in the following two scenarios
Both of these should be fairly common, but here is the example code for the first case, which involves some other components, as well
- Padding, inside margin
- GestureDetector, with click gestures, can add response events
- ClipRRect, rounded corners
Widget _buildHead(BuildContext context) {
return Padding(
padding: EdgeInsets.fromLTRB(0.20.0.28),
child: GestureDetector(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
alignment: Alignment.bottomRight,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(45),
child: Image.asset(
'res/assets/head.jpg'.width: 90.height: 90.fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.only(bottom: 10),
child: ImageFactory.camera,
)
],
)
],
),
),
);
}
Copy the codeListView
ListView is a ListView, which is the iOS UITableView. It is recommended to use the builder method to create a ListView, which has a memory reclamation mechanism, similar to the iOS reuse mechanism.
// ListView is created on a basic basis
Widget listDemo() {
return ListView.builder(
itemCount: 10.// The number of items
itemBuilder: (context, index) {
// Render the item component
return Text('data');
});
}
// ListView creates a splitter line
Widget listSepDemo() {
return ListView.separated(
itemBuilder: (context, index) {
// Render the item component
return Text('data');
},
separatorBuilder: (context, index) {
// Render the item component
return Container(
height: 1.color: Colors.grey,
);
},
itemCount: 10);
}
Copy the codeNo dividing line
With a line
GridView
GridView is a GridView, just like iOS UICollectionView. It is recommended to use the builder method to create a GridView, which has a memory reclamation mechanism, similar to iOS reuse mechanism. GridDelegate is the configuration of grid properties such as horizontal spacing, vertical spacing, and so on.
Widget gridDemo() {
return GridView.builder(
itemCount: 10.gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3.crossAxisSpacing: 10.mainAxisSpacing: 10),
itemBuilder: (context, index) {
return Container(
color: Colors.green,
width: 100.height: 100,); }); }Copy the codeGridView- GridView
conclusion
These basic components are enough for most scenarios. You don’t need to be familiar with all the components to get started. You can look for a particular view in the process of writing.
So, the second article on the first to this bar, the way of learning obstacles and long, we meet later, ð ð ð
